vuex中的state、mutations 、actions 、getters四大属性如何使用
作者：互联网
一、state （提供唯一的公共数据源）
方式1 在div中，$store.state.count
方式2
import {mapState} from ‘vuex’
computed:{
…mapState([‘count’])
}
在div中直接使用，{{count}}
二、 mutations (用于变更store中的数据)（不能执行异步操作，延时器）
方式1
在store.js中，
Mutations:{
Add(state) {
State.count++
}
}
butonOnclick {
this.$store.commit(‘add’)
}
方式2
Import {add} from ‘vuex’
Methods: {
…mapMutations([‘add’])
}
点击事件直接使用
三、Actions
actions 用于处理异步任务，但是action中还是要通过触发mutations的方式间接的变更数据。
注意：action中，不能直接修改state中的数据，必须通过context.commit()触发某个mutations才行。
方法1
Store.js中,
Actions: {
addN (context,step) {
setTimeout(()=> {
context.commit(‘add’)
})
}
}
buttonOnclick() {
this.$store.dispatch(‘addN’)
}
方法2
import {mapActions} from ‘vuex’
methods: {
…mapActions([‘addN’])
}
四、 getters
(用于对store中的数据进行加工处理形成新的数据)（不会修改state中的数据）
类似vue中的计算属性
方式1
{{this.$store.getters.名称}}
getters: {
showNum: state=> {
return ‘当前数量是’+ state.count + ’个’
}
}
方式2
Import {mapGetters} from ‘vuex’
Computed: {
…mapGetters([‘showNum’])
}
{{ showNum }}
标签：count,getters,mutations,actions,state,add,vuex,store 来源： https://www.cnblogs.com/xiaobailang/p/15837022.html