1、vuex的简单使用方法
安装： cnpm install vuex --save
使用：
（1）新建一个store的文件夹
代码例子：
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
const state = {
count: 0
}
const mutations = {
increment(state) {
state.count ++;
}
}
export default new Vuex.Store({
state,
mutations
})
（2）在main.js里面引用
new Vue({
el: ‘#app‘,
store,
router,
template: ‘<App/>‘,
components: { App }
})
（3）在组件里面里面使用
export default {
computed: {
count() {
return this.$store.state.count
}
}
}
2、state
（1）mapState函数
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
PS： 当computed里面还要同时放置其他的计算属性的时候，可以把state的通过对象展开运算符
computed: {
...mapState({=
count: state => state.count,
countAlias: ‘count‘,
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
2、getter
getter的返回值会根据它的以来被缓存起来，且当只有它的依赖值发生改变才会被重新计算
（1）接受state作为第一个参数
const getters = {
evenCount: state => {
return state.count + 2;
}
}
export default new Vuex.Store({
getters
})
（2）接受其他的getter作为第二个参数
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
}
（3）也可以通过返回一个函数，实现给 getter 传参
getTodosById: state => (id) => {
return state.todos.find(todo => (todo.id) === id)
}
（4）mapGetters辅助函数
...mapGetters({
evenCount:‘evenCount‘,
doneTodos: ‘doneTodos‘,
doneTodosCount: ‘doneTodosCount‘,
})
3、mutation： 同步函数
更改vuex的store中的状态的唯一发哪地方是提交mutation，在vuex中的mutation非常类似与事件：每个mutation都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且他会接受一个state作为第一个参数：
const mutations = {
increment(state) {
state.count ++
}
}
（1）mapMutations
methods: {
...mapMutations({
add: ‘increment‘
})
}
（2）可以向mutation传入额外的参数，即mutation的载荷
customIncrement(state, payload) {
state.count += payload.n
}
使用：
customAdd() {
return this.$store.commit("customIncrement", {
‘n‘: 3
})
}
4、action ： 可以异步执行
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更状态。
- Action 可以包含任意异步操作。
使用：
export default {
addevent: ({commit}, param) => commit(‘ADDEVENT‘, param),
reduce: ({commit}, param) => commit(‘DISCREMENT‘, param),
}
调用：
...mapActions({
add1: ‘addevent‘
}),
reduce() {
this.$store.dispatch("reduce").then(() => {
console.info(23342)
})
}
PS： 异步执行可以利用.then 、 async/await
5、module
由于使用单一状态数的话，应用的所有会集中到一个比较大的对象，当应用变得非常复杂的时候，store对象就有可能变得相当的臃肿，因此可以将store分割模块，每个模块拥有自己的state、mutation、action、getter
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态