Actions
`about.vue`
```html
<template>
<div class="about">
<p>单价: {{price}}</p>
<p>
<button @click="add">+</button>
数量: {{count}}
<button @click="sub">-</button>
</p>
<p>总价: {{totalMoney}}</p>
</div>
</template>
<script>
import {mapState, mapActions} from "vuex";
export default {
data() {
return {}
},
computed: {
...mapState(["totalMoney", "price", "count"])
},
methods: {
...mapActions(["add", "sub"]),
}
}
</script>
```
`store/index.js`
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
price: 15.00,
count: 0,
totalMoney: 0,
},
mutations: {
addCount(state) {
state.count ++
this.commit("calcTotalMoney");
},
subCount(state) {
state.count --
this.commit("calcTotalMoney");
},
calcTotalMoney(state) {
state.totalMoney = state.count * state.price
}
},
actions: {
add({commit}) {
commit('addCount');
},
sub({commit}) {
commit('subCount');
}
},
modules: {
}
})
export default store;
```
`main.js`
```javascript
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
```