在vue脚手架运用vuex（状态管理器）+ 登录后用户名的保存
1、安装vuex，
命令：npm i vuex -D
2、在src文件里新建一个store文件夹，然后 创建store.js文件，
在store.js里引入vue ,vuex 如下
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)import state from './state'var mutations={add(a,b){a.count+=b},jian(a){a.count--}
}export default new Vuex.Store({state,mutations})3、如果state数据比较多，可给state单独建个文件，state.js，然后暴露一下
var state={count:0
}export default state在store.js接收一下
store.js文件import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)import state from './state'var mutations={add(a,b){ //a就表示state对象a.count++},jian(a){a.count--}
}export default new Vuex.Store({state,mutations})4、在main.js文件里引入import store from './store/store.js'
然后 use 一下,在 new Vue({ }) 添加 store, 如下：
main.js部分代码import App from './App'
import router from './router'
import store from './store/a'Vue.config.productionTip = falseVue.use(Vuex)
Vue.use(ElementUI);
Vue.use(MintUI)/* eslint-disable no-new */
new Vue({el: '#app',router,store,components: { App },template: '<App/>'
})5、然后就可以在组件用<h2>{{this.$store.state.count}}</h2>在页面展示，下面我们来用一下。如下
<input type="text" v-model="username" /><!--<h2>{{this.$store.state.count}}</h2><button @click="login()">登陆</button>--><h2>{{this.$store.state.count}}</h2><button @click="add">增加</button><button @click="jian">递减</button>如果要修改store数据，可通过 this.$store.commit("add")，
修改后的数据在每个组件都生效
methods(){add(){this.$store.commit("add")}}-------------------------------登录后的用户名的保存-------------------------------------
1、下面是登录后的用户名的保存
<input type="text" v-model="username" /><h2>{{this.$store.state.count}}</h2><button @click="login()">登陆</button>data(){return{str:'关于',zidong:false,username:''}},在store.js修改，b为传递的数据,等价于this.$store.commit('login',this.username)第二个参数
var mutations={login(a,b){a.count=b},jian(a){a.count--}
}在about页面组件更改为login
methods:{login(){this.$store.commit('login',this.username)}}然后就可以了，这样登录名就传到了页面
《《未完待续》》
在vue脚手架运用vuex（状态管理器）+ 登录后用户名的保存相关推荐
- flux react php,Vue的Flux框架之Vuex状态管理器
学习vue之前,最重要是弄懂两个概念,一是"what",要理解vuex是什么:二是"why",要清楚为什么要用vuex. Vuex是什么? Vuex 类似 Re ...
- 【vuex状态管理案例mutations和actions区别】
目录 vuex 状态管理 传统组件传值的缺点 案例 加减 效果 现在我们希望它是两个计数器的数同时加加减~ 先来看一下减的 父组件 子组件 加的是一样的逻辑哦 虽然这样可以实现我们想要的效果但是,还是 ...
- vue项目的状态管理器(Vuex)
一.什么是vuex Vuex是vue项目的状态管理器(状态管理工具).vue项目的状态是通过vue实例(组件)绑定的变量来体现.所以也可以说vuex是用来管理vue项目中的各种变量(vue项目中的组件 ...
- Vue状态管理器state（Vuex）
一.什么是Vuex Vuex是一个专为Vue.js应用程序开发的状态管理模式 采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 二.什么是状态管理模式 状态自管 ...
- Vue的状态管理器：Vuex
无需原生开发基础,也能完美呈现京东商城.<混合开发京东商城系统,提前布局大前端>课程融合vue.Android.IOS等目前流行的前端和移动端技术,混合开发经典电商APP--京东.课程将各 ...
- Vue项目 成员管理系统 Vuex状态管理(10)
Vuex是一个专为Vue.js应用程序开发的状态管理模式.它采用集中式储存管理应用的所有组件的转台并以相应的规则保证装填以一中可预测的方式发生变化. Vuex可以将组件中的某些属性.值或者方法拿出来统 ...
- 在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具 一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
- vuex状态管理，用最朴实的话讲解最难懂的技术，
一.案例演示 引入vuex 1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm n install vuex --save 需要注意的是这里一定要加上 –sa ...
- [react] 状态管理器解决了什么问题？什么时候用状态管理器？
[react] 状态管理器解决了什么问题?什么时候用状态管理器? 专注 view 层 React 官网是这么简介的.JavaScript library for building user inter ...
最新文章
- [转载] 七龙珠第一部——第004话 掳人的妖怪——乌龙
- DIKW体系（Data-Information-Knowlege-Wisdom）
- OJ系列之---单词倒排
- linux远程白名单,Linux的Iptables命令实战2—设置白名单
- Oracle入门（十二）之SQL的DDL
- 探索Windows命令行系列(7)：通过命令编译C#类和Java类
- python展开list嵌套，并解决from compiler.ast import flatten报错ModuleNotFoundError: No module named ‘compiler‘
- java面向对象的理解_面向对象及其核心的概念：抽象、继承与多态、封装
- 分享自TERRY-V 《Qt Creator生成带图标的exe文件》
- ×××的两种组网方式
- 全网最通俗易懂的「插屏广告」接入方法
- 【总结】美团之推荐系统
- 安装 Node.js
- 功能测试工具SilkTest
- RH850开发板StarterKit示例程序分析--R_ADCA0_Init()；ADC初始化
- 视频教程-python全栈习题课-Python
- 一成电计算机考研国家线2O 9,【九〇六 | 打卡】考研“国家线”只是起点，我们要挑战骇浪惊涛！...
- Category In Objective-C
- SEM测试成像原理与消像散
- Name Changer – 批量改名大杀器[Mac]