vuex理解

vuex

state --- 存储数据状态
mutation --- 对内改变state里面的数据
action --- 对外操作的方法,可以是异步操作
页面调用dispatch 提交方法到action
this.store.dispatch("方法名",值)
action调用commit提交方法到mutation
this.store.commit("方法名",值)
getters --- 把数据return出来
getters: {
参数名:(state)=> { return state.参数名; }
}
在页面可以在用this.$store.getters.参数名


辅助函数
mapState 写法:
1. computed: mapState({
count: state => state.count,
})
2. computed: mapState({
count: 'count',
})
3. 属性名称和state的名称一致时
computed: mapState([
'count'
])
4. 扩展运算符
computed:{
...mapState([
'count',
])
},


mapGetters 写法:
1. computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'count',
])
}
2. 与mapState 一样


mapMutation 写法:
...mapMutations([
'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

// `mapMutations` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
})


mapAction
用法和mapMutation一样的

原文地址:https://www.cnblogs.com/linliu/p/14564912.html