题记:前段时间时隔8个月重新拾起了vue,vue的太(yi)好(jing)用(wang)了(wan)。
一、Vuex初体验
以前用惯了react的dva然后突然切换到vue的vuex真的有点不习惯。
1、Store
这个是vuex中的大哥大,什么都归它管(state、mutations、getter、action、module),你可以把它理解为一个仓库(官方文档也是这么说的)
// 创建stroe
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
2、State
每个Stroe中都会有这么一个状态树、对于vue来说他是全局的,对于store来说他是唯一的,我们可以把它理解为仓库中的货物,当客户(vue)中想要取出仓库(store)中的货物(state),很简单this.$stroe.state.test
3、Mutation
mutation 必须是同步函数
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。这个我们可以把它比喻为一个订单(Mutation),当客户(vue)需要改变仓库(store)中的货物(state)时,我们就可以通过这个方法去改变,但是这个方法在本地是不能被直接调用的,你需要以相应的 type 调用 store.commit
方法:
// 无参数提交
store.commit('increment')
// 有参数
store.commit('increment', {
amount: 10
})
// OR
store.commit({
type: 'increment',
amount: 10
})
其实这一点和dva有点相似
4、Action
这个和Mutation和相似,但是:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
而且actions是与Mutation的触发方法也不同,它是用的store.dispatch
(确认过眼神),而且它可以调用actions,讲道理它是比mutation高一个等级的。
至于剩下的Getter、Module目前好像还没有怎么用到,就下次用了体验了过后再说吧。
二、Vuex中的辅助函数
在vuex中所有的辅助函数都只有一个目的,方便你我他
1、mapState
当我们需要在一个页面中获取store中的多个状态时,怎么办
// bad
this.$store.state.a
this.$store.state.b
this.$store.state.c
// good
computed:{
...mapState({
a:state=>state.a,
b:state=>state.b,
c:state=>state.c
})
}
但是这个地方有一个坑,如果a是一个对象
a:{
d:1,
e:{
f:2
}
}
computed:{
...mapState({
f:state=>state.a.e.f
})
}
这样是不行的,具体为什么我也不是很清楚,求大佬讲解
未完待续...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。