Vuex
##1、什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
-
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
-
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
2、示例
export default new Vuex.Store({
//记录应用程序状态，一般来说只能在mulations中用 commit改变状态
state: {
count:0,
roles:['master','normal user']
},
//就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
getters:{
normalRoles(state){
return state.roles.filter(function{...})
}
},
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
mutations: {
getCount(state){
return state.count
},
setCount(state,x){
state.count = x
}
},
/*Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
可调用getters，mutations，也可以commit 改变state*/
actions: {
addCount: ({commit,state},count) => {
//commit('setCount',count+1)
state.count = state.count + count //奇怪的是这样也是可以的
}
}
})
3、分发action
$store.dispatch('addCount')
import {mapActions} from 'vuex'
methods:{
...mapActions([
'addCount'
]),
addThing(){
this.addCount()
}
}
4、store模块分割
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 的状态
对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象。 默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。 如果需要彻底隔离，可用namespaced