vuex之actions和mutations

index.js配置

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        heroArr: [],
        heroName: " "
    },
    mutations: {
        GETARR: function(state, payload) {
            state.heroArr = payload
        },
        CHANGENAME: function(state, payload_name) {
            state.heroName = payload_name
        }
    },
    actions: {
        getInformation({ commit }, arr) {
            commit("GETARR", arr)
        },
        getSingleInfo({ commit }, singleName) {
            commit("CHANGENAME", singleName)
        }
    },
    getters: {
        information: function(state) {
            return state.heroArr.filter(r => r.name == state.heroName)
        }
    }
})

App.vue

<template>
  <div id="app">
    请输入姓名（输入结束按enter键）：
    <input type="text" v-model="nameMsg" @keyup.enter="getH()" />
    <br /><br />
    搜索得到的信息为：
    <ul>
      <li v-for="(item, index) in $store.getters.information" :key="index">
        {{ item.name }}----{{ item.weapon }}----{{ item.sex }}----{{
          item.area
        }}
      </li>
    </ul>
    <br />
    <hr />
    <br /><br />
    <button @click="flag = !flag">完整信息：</button>
    <ul v-if="flag">
      <li v-for="(item, index) in $store.state.heroArr" :key="index">
        {{ item.name }}----{{ item.weapon }}----{{ item.sex }}----{{
          item.area
        }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  components: {},
  data() {
    return {
      nameMsg: "",
      flag: false,
    };
  },
  created() {
    this.getHeroInfo();
  },
  methods: {
    getH() {
      this.getHeroInfo();
    },

    getHeroInfo() {
      axios({
        method: "get",
        url: "context.json",
      }).then((res) => {
        this.$store.dispatch("getInformation", res.data.hero);
        if (
          this.nameMsg == "徐凤年" ||
          this.nameMsg == "老黄" ||
          this.nameMsg == "姜泥" ||
          this.nameMsg == "李淳罡" ||
          this.nameMsg == "徐脂虎"
        ) {
          this.$store.dispatch("getSingleInfo", this.nameMsg);
        } else {
          alert("请输入正确的姓名");
        }
      });
    },
  },
};
</script>

context.json

{
    "hero": [{
            "name": "徐凤年",
            "weapon": "冬雷",
            "sex": "男",
            "area": "北椋"
        },
        {
            "name": "老黄",
            "weapon": "剑九六千里",
            "sex": "男",
            "area": "北椋"
        },
        {
            "name": "姜泥",
            "weapon": "神符",
            "sex": "女",
            "area": "北椋"
        },
        {
            "name": "李淳罡",
            "weapon": "木马牛",
            "sex": "男",
            "area": "北椋"
        },
        {
            "name": "徐脂虎",
            "weapon": "木知",
            "sex": "女",
            "area": "北椋"
        }
    ]
}