vuex的mutations传值

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>

 

转载于:https://www.cnblogs.com/luguankun/p/10785189.html