Mutation
```html
<template>
<div class="about">
<h1>count: {{count}}</h1>
<button @click="test">修改count的值</button>
<button @click="test2">修改count的值2</button>
</div>
</template>
<script>
import {mapState, mapMutations} from "vuex";
export default {
data() {
return {}
},
computed: {
...mapState(["count"])
},
methods: {
...mapMutations(["addCount"]),
test() {
this.$store.commit("addCount", 25);
},
test2() {
this.addCount(30)
}
}
}
</script>
```
`store/index.js`
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addCount(state, num) {
state.count += num
}
},
actions: {
},
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')
```
---
## 示例
```html
<template>
<div class="about">
<p>单价: {{price}}</p>
<p>
<button @click="addCount">+</button>
数量: {{count}}
<button @click="subCount">-</button>
</p>
<p>总价: {{totalMoney}}</p>
</div>
</template>
<script>
import {mapState, mapMutations} from "vuex";
export default {
data() {
return {}
},
computed: {
...mapState(["totalMoney", "price", "count"])
},
methods: {
...mapMutations(["addCount", "subCount"]),
}
}
</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: {
},
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')
```