Vuex的一些函数
mapState:帮助生成映射代码
借助**mapState可以从state
**中读取数据,生成计算属性,函数返回值为一个对象
对象写法:...mapState({ add: 'sum', name: 'name', subject: 'subject' })
这个不能简写,因为{name}简写的意思是,有一个name属性,它的值为name变量。而这个表示一个返回值,是个字符串,这样简写会报错,说subject未定义
数组写法:...mapState(['sum', 'name', 'subject'])
这样的简写表示,新生成的计算属性叫sum,取值取自state.sum
mapGetters
同理,只不过**mapGetters是从getters**
里面读取数据,其余用法和mapState一样
mapMutations
借助**mapMuttations可以生成和commit
**里面对应的方法,返回值为对象
对象写法:...mapMutations({ increment: 'ADD', decrement: 'REDUCE' }),
值得注意的是,我们自己写写出来的函数是这样的:
increment() {
this.$store.commit('ADD', this.n)
},
而mapMutations生成的函数是这样的
increment(value) {
this.$store.commit('ADD', value)
},
所以我们在使用这个函数的时候要记得传参
<button @click="increment(n)">+</button>
数组写法:...mapMutations(['ADD','REDUCE' ] ),
这样简写的条件和上面一样,取自commit里面的ADD,生成一个ADD方法,调用的时候就是写ADD:
<button @click="ADD(n)">+</button>
mapActions
同理,借助**mapActions生成dispatch
**里面对应的方法,用法和mapMutations一样。
多组件共享数据
跟前面的用法都一样,只需要把需要数据在自己的组件里生成属性或方法,就可以调用了,相当于把vuex作为一个中间件,实现组件通信
vuex模块化
把一个功能相关的所有actions、mutations、state、getters写在一个对象里,分成单文件后要导出
export default{
namespaced:true,
actions:{
add(*context*,*value*){
*context*.commit('ADD',*value*)
},
},
mutations:{
ADD(*state*,*value*){
*state*.sum +