Vue学习之状态管理机制Vuex

1、介绍：Vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
*Vuex（状态管理机制）的出现是为了将数据以及数据相关的操作抽离出来进行统一管理。

2、安装：
（1）方式1：直接下载 / 引用
https://unpkg.com/vuex
unpkg.com 提供了基于 NPM 的 CDN 链接。以上的链接会一直指向 NPM 上发布的 最新版本。您也可以通过 https://unpkg.com/vuex@2.0.0 这样的方式指定特定的版本
（2）方法2：npm安装
npm install vuex –save
在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex ，
import Vue from 'vue’
import Vuex from 'vuex’
Vue.use(Vuex)

3、使用：

var store = new Vuex.Store({ 
state: {count: 0}, //保存数据
mutations: {increment (state) {state.count++}}, //突变，用于修改state的值
actions: {increment (context) {context.commit('increment')}} //动作，用于调用突变执行数据的改变
});
new Vue({
	el:"#app"，
	store:store,
	computed:{
		//方法1：
		count(){return this.$store.state.count}
		//方法2：数组中的参数要与state中的值保持一致
	  	…Vuex.mapState([‘count’])
		//方法3：
		...Vuex.mapState({'con':'count','name':'name'})
	},
	methods:{
		//方法1：
		plus:function(){this.$store.dispatch('increment');}
		//方法2：
		...Vuex.mapActions(['count']);
	}
});

4、Getter: store 的计算属性。例：对store里的数据进行加工之后再进行访问。
（1）方法1----getters: getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

const store = new Vuex.Store({
	state: { 
	todos: [ { id: 1, text: 'one', done: true }, { id: 2, text: 'two', done: false } ] 
	}, 
	getters: { 
	doneTodos: state => { return state.todos.filter(todo => todo.done) } 
	}
})；
store.getters.doneTodos

（2）方法2----mapGetters 辅助函数：仅仅是将 store 中的 getter 映射到局部计算属性。

// 方法1：使用对象展开运算符将 getter 混入 computed 对象中
computed: { 
	...Vuex.mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) 
} 

//方法2：如果你想将一个 getter 属性另取一个名字，使用对象形式 
computed:{ 
	number:function(){return 100}, 
	...Vuex.mapGetters({'girls':'femaleStudents'})
}

5、Mutation：更改 Vuex 的 store 中的状态，必须是同步操作。不可以包含异步操作。

mutations:{ 
	increment:function(state){state.count++;} 
}
store.commit('increment')

（1）mapMutations: 将组件中的 methods 映射为 store.commit 调用

mutations:{ 
	increment:function(state){state.count++;} 
} 
methods:{ 
	...Vuex.mapMutations({ 
		// 将 `this.add()` 映射为 `this.$store.commit('increment')` 
		add:‘increment' 
	}) 
}

6、Action：可以异步操作。例如，与后台交互数据

Action 类似于 mutation ，不同在于， Action 提交的是 mutation ，而不是直接变更状 态，并且 Action 可以包含任意异步操作， Action 函数接受一个与 store 实例具有相同 方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation ，或 者通过 context.state 和 context.getters 来获取 state 和 getters 。

（1）普通用法：

actions:{ 
	increment:function(context){ 
		context.commit('increment'); 
	} 
}
store.dispatch('increment',{amount:10})

（2）mapActions：将组件的 methods 映射为 store.dispatch 调用

actions:{ 
	increment:function(context){ 
		context.commit('increment'); 
	} 
} 
methods:{ 
	// 将 `this.add()` 映射为 `this.$store.dispatch('increment')` 
	...Vuex.mapActions({addAction: 'increment'}) 
}