mutations是要通过方法触发的,用于更改store里的数据的。
this.$store.commit("mutationsName")
例子:
store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export const store = new Vuex.Store({ state:{ prod :[ {name:"zs",age:12}, {name:"ls",age:13}, {name:"ww",age:14}, ] }, getters:{ getValue(state){ var item = state.prod.map(ele=>{ return { name:ele.name+"__技术部", age:ele.age+10 } }) return item ; } }, mutations:{ getVal(state){ var items = state.prod.map(ele=>{ return { age:ele.age+=4 } }) return items; } } })
Home.vue
<template>
<div>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,i) in getValue">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<hr>
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="(item,i) in getVal">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
<button @click="getMutaions()">加4</button>
</div>
</template>
<script>
export default {
name: "Home",
data () {
return {
};
},
methods:{
getMutaions(){
this.$store.commit("getVal"); // 这里不用return的
}
},
computed:{
getValue(){
return this.$store.state.prod
},
getVal(){
return this.$store.getters.getValue
}
}
}
</script>
<style lang="css" scoped>
</style>