vuex（vue状态管理）

vuex

项目中有些数据需要用 vuex 来统一管理的，如登录token,用户信息，一些全局个人偏好设置等，用vuex管理更加的方便，具体当然还是要结合自己的业务场景的。业务之间的耦合度很低的就在每个页面存放自己的data就可以了。

• 安装vuex，使用命令：npm install vuex --save（安装vuex保存到本地）
• 在项目的src目录下新建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store
• 在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象
• 开始编写vuex业务代码

store

const store = new Vuex.Store({
	state:{
		count:1
		}
}）

然后在页面通过 this.$store.state来获取我们定义的数据

<span>{{this.$store.state.count}}</span>

Getter

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

const getters = {
	sidebar: state => state.app.sidebar,
	token: state => state.user.token,
	roles: state => state.user.roles
}
export default getters

Mutations

如果需要修改store中的值唯一的方法就是提交mutation来修改
修改index.js文件，添加mutations

mutations:{
	add(state){
		state,.count=state.count+1;
	}
}

在页面中使用：

addFun(){
	this.$store.commit("add");
}

Actions

然而官方建议提交一个actions，在actions中提交mutation再去修改状态值。
actions可以异步操作 ，让代码逻辑更清晰。它类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。

在vuex2中, actions并不一定要, 但是mutation是必须要的, state的值, 只能通过mutation来编辑
修改index.js文件，先定义actions提交mutation的函数

actions:{
	addFun(context){
		context.commit("add");
	}
}

在页面使用：

addFun(){
	this.$store.dispatch("addFun");
}