mutation
在使用 store.commit 方法提交 mutation 时，还可以传入额外的参数，即 mutation 的载荷（payload）
代码如下：
mutations: { increment(state,n) { state.count+=n } } store.commit("increment",10)
复制代码
载荷也可以是一个对象。
代码如下·：
mutations: { increment(state,payload) { state.count+=payload.amount } } store.commit("increment",{ amount:10 })
复制代码
提交 mutation 时，也可以使用包含 type 属性的对象，这样传一个参数就可以了
代码如下：
mutations: { increment(state,payload) { state.count+=payload.amount } }store.commit({ type:'increment', amount:10})
复制代码
在组件中提交 mutation 时可以使用 mapMutation 辅助函数将组件中的方法映射为 store.commit 调用
代码如下：
import { mapMutations } from 'vuex'export default { name: 'App', data() { return {} },methods:mapMutations([ 'increment'])}
复制代码
将increment映射为this.$store.commit('increment')
除了使用字符串数组外，mapMutation 函数的参数也可以是一个对象
代码如下：
import { mapMutations } from 'vuex'export default { name: 'App', data() { return {} },methods:mapMutations({ add: 'increment'})}
复制代码
大多数情况下，组件还有自己的方法，在这种情况下，可以使用 es6 的展开运算符提取 mapMutation 函数返回的对象属性
代码如下：
import { mapMutations } from 'vuex'export default { name: 'App', data() { return {} },methods:{ ...mapMutations({ add: 'increment'})}}
复制代码
mapState
当一个组件需要使用多个 store 状态属性时，将这些状态都声明为计算属性就会有些重复和冗余。为了解决这个问题，可以使用 mapState 辅助函数帮助我们生成计算属性
代码如下：
在 store 中定义两个状态
const store = new Vuex.Store({ state: { count: 0, message: 'hgk' } })
复制代码
在组件中使用 mapState 辅助函数生成计算属性
import { mapState } from 'vuex'export default { name: 'App', data() { return { mag: '', count: '' } }, computed: mapState({ count: 'count', msg: 'message' })}
复制代码
注意count: 'count', msg: 'message'冒号前面的是计算属性的名字，冒号后面是 store 中状态属性的名字，以字符串形式给出
如果计算属性的名字和 store 中状态属性的名字相同，那么还可以进一步简化，直接给 mapState 函数传递一个字符串数组既可
代码如下：
computed: mapState([ 'count', 'message' ] )
复制代码
count: 映射'this.count 为 store.state.count
message: 映射'this.message 为 store.state.message
mapState 函数返回的也可以是一个对象，可以使用展开运算符将他和组件的本地计算属性结合一起使用
代码如下：
computed:{ localComputed(){ ...mapState({ }) } }
复制代码
评论