store.js文件:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
size: 5
},
mutations: { //同步执行
add: function (state,param) { //传参
state.size = state.size+param
return state.size;
},
dec: function (state) {
return state.size--;
}
},
actions: {//异步执行
asyncAdd:function (context,param) {
context.commit('add',param)
},
asyncDec:function (context) {
context.commit('dec')
},
},
getters: {
getSize: function (state) {
return state.size * 2;
},
stringSize: function (state) {
return state.size + "次!"
}
}
})
组件中的使用:
<template>
<div class="app">
<h1>this is an product1 page</h1>
<p> {{getSize}}</p>
<p> {{stringSize}}</p>
<p><button @click="add(10)">Add</button></p>
<p><button @click="dec">Dec</button></p>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import {mapMutations} from 'vuex';
import {mapActions} from 'vuex';
export default {
name: "Product1",
computed: {
...mapGetters(['getSize', 'stringSize'])
},
methods: {
...mapMutations(['add', 'dec']),
...mapActions(['asyncAdd', 'asyncDec'])
}
}
</script>
<style scoped lang="stylus">
.app
background #ccab3c
ul, li
list-style none
</style>