Vuex的使用流程

大前提：vuex函数包引入

• 新建一个名为store文件夹，在名下新建index.js
• index.js中引入vuex函数包

import Vue from "vue";
import Vuex from "vuex";
//需要使用插件一次
Vue.use(Vuex);

属性介绍

state 存储数据，数据状态管理
mutations: 同步操作数据，将数据提交给state
actions: 异步操作，提交mutations

存储数据

• 首先需要页面组件绑定actions（谁来调用）

  mounted() {
    //通知Vuex发请求，获取数据，存储与仓库当中
    this.$store.dispatch("categoryList");
  },

• 在actions对象中定义绑定的actions函数（以下皆是定义具体的actions方法）

const actions={
    //通过api里面的接口函数调用，向服务器发请求，获取服务器的数据
     async categoryList({commit}){
        let result= await reqCategoryList();
        if(result.code==200){
            commit("CATEGORYLIST",result.data)
        }
    }
};

• 定义mutations对象，定义actions调用的mutations函数

const mutations={
    CATEGORYLIST(state,categoryList){
        state.categoryList=categoryList;
    }
};

• 定义state存储属性 ，定义一个属性，用来接收或者返回数据

const state={
    //state中数据默认初始值别乱写，服务器返回对象，服务器返回数组【和服务器返回值一样类型】
    categoryList:[],
};

获取数据

• 在需要获取数据的组件中定义computed属性，然后引入mapstate函数，然后定义一个属性用来接收state仓库里的属性值
  （记得引入mapstate的函数包）

import { mapState } from "vuex";
  computed: {
    ...mapState({
      //右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数会立即执行一次
      //注入一个参数state，其实即为大仓库中的数据
      categoryList: (state) => state.home.categoryList,
    }),
  },

流程：
触发事件的时候，会通过dispatch来访问actions中的方法，actions中的commit会触发mutations中的方法修改state的值，通过getter把数据更新到视图。