vuex的actions属性

vuex的actions属性是用来处理异步方法的，通过提交mutations实现。

actions里要传入两个参数context和playload

调用actions的时候，使用this.$store.dispatch("actionsName",playload)

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;
        },
        getAgeByName:(state)=>(name)=>{
            var items = state.prod.find(ele=>{
                if(ele.name === name){
                    return ele.age;
                }
            })
            return items.age;
        }

    },
     mutations: {
        getValue(state, num) {
            var items = state.prod.map(ele => {
                return {
                    age: ele.age += num
                }
            })
            return items;
        }
    },
    actions: {
        getActionsValue(context, playload) {
            setTimeout(function () {
                context.commit("getValue", playload);
            }, 2000)
        }
    }
})

home.vue

<template>
<div>
    <table>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr v-for="(item,i) in getValue">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
    </table>
    <hr>
    <table>
        <tr>
           <th>姓名</th>
            <th>年龄</th>
        </tr>
         <tr v-for="(item,i) in getVal">
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
        </tr>
      
    </table>
     <hr>
        <button @click="getMutationsMethds(100)">mutations get</button>
        <hr>
        <button @click="getActionsMethods(200)">actions get</button>
</div>
</template>
<script>
export default {
  name: "Home",
  data () {
    return {
    };
  },
  computed:{
      getValue(){
        return   this.$store.state.prod;
      },
      getVal(){
        return   this.$store.getters.getValue;
      }
  },
  methods:{
      getMutationsMethds(num){
          this.$store.commit("getValue",num);
      },
      getActionsMethods(amount){
          this.$store.dispatch("getActionsValue",amount);
      }
  },
  created(){
     console.log( this.$store.getters.getAgeByName("zs"));
     
  }
}
</script>
<style lang="css" scoped>
</style>