关于vueX在项目中的使用

1.安装、导入、挂载

安装：npm install vuex@next --save
main.js中挂载:import store from './store'    app.use(store)
导入：import { createStore } from 'vuex';

2.书写基本结构

export default createStore({

  state: {

    vehicleTypeList: [],//初始化定义需要使用的数据

  },

  getters: { //类似于计算属性，将数据处理成需要的格式
           vehicleTypeDict(state) {
               return state.vehicleTypeList.reduce(
                     (prev, curr) => ({ ...prev, [curr.value]: curr.name }),
                       //prev:累加器，[curr.value]：计算数学名用表达式来动态地定义对象的属性名
                    {}//累加器初始值，提示觉得处理后的数据类型
              )
          },
    }，

 mutations: { //修改数据，但只能是同步函数，不能做异步操作
            setVehicleTypeList(state, data) {
                  state.vehicleTypeList = data;
               },
            }，

  actions: {  //响应组件中加的动作
            async getVehicleTypeList({ commit }) {
              const res = await getParams(vehicleTypeParams);
              commit('setVehicleTypeList', res?.data ?? []);
              },
         }，

} )

3.在页面组件中使用

computed: {//计算属性，解构赋值
    ...mapState(['vehicleTypeList']),//用于帮助我们映射state中的数据为计算属性
    ...mapGetters(['vehicleTypeDict'])//用于帮助我们映射getters中的数据为计算属性
    },
mounted(){
       this.$store.dispatch('getVehicleTypeList'); //代替手动调用action，用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
}

详细见此博客（十四）VueX：集中式状态（数据）管理_不用mapactions可不开启命名空间吗-CSDN博客