state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之可以异步。
modules => 模块化Vuex
export default{
state: {
count:5
},
getters: {
// 单个参数
countDouble: function(state){
return state.count * 2
},
// 两个参数
countDoubleAndDouble: function(state, getters) {
return getters.countDouble * 2
}
},
mutations: {
//无提交荷载
increment(state) {
state.count++
}
//提交荷载
incrementN(state, obj) {
state.count += obj.n
}
},
actions: {
increment (context) {
setInterval(function(){
context.commit('increment')
}, 1000)
}
}<template>
<div class="p-genDan">
<p>{{ $store.state.count }}</p><!--state第一种使用方法，直接使用-->
<p>{{ count }}</p> <!--state第二种方式-->
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
name: 'genDan',
data() {
return {};
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
//mutations调用 第一种形式
//无提交荷载
this.$store.commit('increment')
//提交荷载
this.$store.commit('incrementN', {n: 100})
//对象风格的提交方式
this.$store.commit({ type: 'incrementN', n: 10}) //mutations调用 第二种形式
this.increment();
this.add(); //Action 通过 store.dispatch 方法触发：
this.$store.dispatch('increment')
// 以载荷形式分发
this.$store.dispatch('incrementN', {n: 10})
// 以对象形式分发
this.$store.dispatch({type: 'incrementN',n: 10})
//Action通过 mapActions
this.incrementN();
},
computed: {
...mapState({
tabView:state => state.selfCenter.moneyManageTabView, //调用子模块selfCenter的state
count: state => state.count, //state第二种使用方法
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) { //state的重新筛选，当前组件有效
return state.count + 10
}
}),
//getters调用第一种调用方式
countDouble: function(){
return this.$store.getters.countDouble
},
countDoubleAndDouble: function(){
return this.$store.getters.countDoubleAndDouble
},
//getters第二种调用方式
//使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'countDouble',
'countDoubleAndDouble',
//如果你想将一个 getter 属性另取一个名字，使用对象形式： 映射 this.double 为 store.getters.countDouble
double: 'countDouble'
//..
]),
...mapGetters('selfCenter',['oneWeekBetTotal','oneWeekBetEcharts']), //调用子模块selfCenter中getters},
methods: { //mutations调用 第二种形式
...mapMutations('selfCenter',['changeMoneyManageTabView']), //调用子模块selfCenter
...mapMutations([
'increment' // 映射 this.increment() 为 this.$store.commit('increment')
]),
...mapMutations({
add: 'increment' // 映射 this.add() 为 this.$store.commit('increment')
}), //mapActions
...mapActions([
'incrementN' //映射 this.incrementN() 为 this.$store.dispatch('incrementN')
]),
...mapActions({
add: 'incrementN' //映射 this.add() 为 this.$store.dispatch('incrementN')
})
},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
};
</script>