vuex进阶知识点巩固
一、Getter
我们先回忆一下上一篇的代码
computed:{
getName(){
returnthis.$store.state.name
}
}
这里假设现在逻辑有变,我们最终期望得到的数据(getName),是基于this.$store.state.name上经过复杂计算得来的,刚好这个getName要在好多个地方使用,那么我们就得复制好几份.
vuex给我们提供了getter,请看代码(文件位置/src/store/index.js)
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
//类似vue的data
state:{
name:'oldName'
},
//类似vue的computed-----------------以下5行为新增
getters:{
getReverseName:state=>{
returnstate.name.split('').reverse().join('')
}
},
//类似vue里的mothods(同步方法)
mutations:{
updateName(state){
state.name='newName'
}
}
})
然后我们可以这样用文件位置/src/main.js
computed:{
getName(){
returnthis.$store.getters.getReverseName
}
}
事实上,getter不止单单起到封装的作用,它还跟vue的computed属性一样,会缓存结果数据,只有当依赖改变的时候,才要重新计算.
二、actions和$dispatch
细心的你,一定发现我之前代码里mutations头上的注释了类似vue里的mothods(同步方法)
为什么要在methods后面备注是同步方法呢?mutation只能是同步的函数,只能是同步的函数,只能是同步的函数!!请看vuex的解释:
现在想象，我们正在debug一个app并且观察devtool中的mutation日志。每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中mutation中的异步函数中的回调让这不可能完成：因为当mutation触发的时候，回调函数还没有被调用，devtools不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。
那么如果我们想触发一个异步的操作呢?答案是:action+$dispatch,我们继续修改store/index.js下面的代码
文件位置/src/store/index.js
importVuefrom'vue'
importVuexfrom'vuex'
Vue.use(Vuex)
exportdefaultnewVuex.Store({
//类似vue的data
state:{
name:'oldName'
},
//类似vue的computed
getters:{
getReverseName:state=>{
returnstate.name.split('').reverse().join('')
}
},
//类似vue里的mothods(同步方法)
mutations:{
updateName(state){
state.name='newName'
}
},
//类似vue里的mothods(异步方法)--------以下7行为新增
actions:{
updateNameAsync({commit}){
setTimeout(()=>{
commit('updateName')
},1000)
}
}
})
然后我们可以再我们的vue页面里面这样使用
methods:{
rename(){
this.$store.dispatch('updateNameAsync')
}
}
三、Module模块化
当项目越来越大的时候,单个store文件,肯定不是我们想要的,所以就有了模块化.假设src/store目录下有这2个文件
moduleA.js
exportdefault{
state:{...},
getters:{...},
mutations:{...},
actions:{...}
}
moduleB.js
exportdefault{
state:{...},
getters:{...},
mutations:{...},
actions:{...}
}
那么我们可以把index.js改成这样
importmoduleAfrom'./moduleA'
importmoduleBfrom'./moduleB'
exportdefaultnewVuex.Store({
modules:{
moduleA,
moduleB
}
})
这样我们就可以很轻松的把一个store拆分成多个.
四、总结
- actions的参数是store对象,而getters和mutations的参数是state.
- actions和mutations还可以传第二个参数,具体看vuex官方文档
- getters/mutations/actions都有对应的map,如:mapGetters,具体看vuex官方文档
- 模块内部如果怕有命名冲突的话,可以使用命名空间,具体看vuex官方文档
- vuex其实跟vue非常像,有data(state),methods(mutations,actions),computed(getters),还能模块化.