vuex的核心： state，getter，mutation，action，module
1.state //仓库 存储状态
vuex通过store选项，将状态从根组件注入到每个子组件，且子组件通过this.$store访问到。
使用：
this.$store.state.xxx //不推荐
computed: { //推荐
xxx() {
return this.$store.state.xxx
}
}
1.1 mapState辅助函数
当一个组件需要多个状态，多状态都声明计算属性会重复冗余。我们可以使用mapState。
例如：
import {mapState} from 'vuex'
computed:{
...mapState({
count: state => state.count,
countAlias: 'count', //等同于state => state.count,
// 为了能够使用 `this` 获取局部状态，必须使用常规函数countPlusLocalState(state) {
return state.count+this.localCount
}
})
2.getter
3.mutation
mutations: {
xxx(state,a){}
}
commit('xxx')
commit('xxx', a)
commit('xxx',{a:xx,b:xx})
commit({
type: 'xxx',
a: 1
})
4.action
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
actions: {
//context 拥有store实例所有方法和属性
xxx(context){
context.commit('mutation的xxx方法'）
}
dispatch('xxx')
dispatch('xxx', a)
dispatch('xxx',{a:xx,b:xx})
dispatch({
type: 'xxx',
a: 1
})
5.module
由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
5.1模块局部状态
5.11 模块内部的mutation和getter,第一个参数是模块局部状态对象
5.12 模块内部action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState。
5.13对于模块内部的 getter，根节点状态会作为第三个参数暴露出来：(state,getters,rootState)
6.命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。
网友评论