后台获取数据给到vueX

<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in $store.state.arrList" :key="index">
        {{ item.title }}<br />
        {{ item.dec }}
      </li>
    </ul>
  </div>
</template>
<script>
//引入axios  
import axios from "axios";
export default {
  name: "App",
  //在页面创建后从后台获取数据
  created() {
    axios.get("/1.json").then((err) => {
    //获取的数据给到vueX里的actions（因为是异步所以要通过actions来调用mutations的方法）（如果是同步则直接调用mutations）
      this.$store.dispatch("data", err.data.arr);
    });
  },
};
</script>

//vuex配置页
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  //存放数据的地方
  state: {
    arrList: []
  },
  //修改状态的地方
  mutations: {
  //这个a是state   b是传进来的参数
    GAI(a, b) {
      a.arrList = b
    }
  },
  //异步调接口通过这个方法通知mutations
  actions: {
  //这里的第一个值是mutations对象所以直接调用里面的commit方法   第二个值是传过来的参数
    data(context, can) {
    //调用mutations.commit里面的函数方法并且传参进去
      context.commit('GAI', can)
    }
  },
})