vuex 添加全局数据和使用（业务：vue将码表数据设为全局，进行调用）

问题

原来调用码表都是直接在页面或者组件中直接调用，但是由于本次需求调用的数据又多又杂，数据加载量达到 10M 多，页面加载就异常的慢。还有组件中也都需要用到，为了不重复调用接口，加重服务压力，决定使用 VueX 进行处理。

> 由于之前没接触过 vuex ，所以今天认真的看了一遍官网。https://vuex.vuejs.org/zh/ 
> 由于理解能力较差，翻阅了一位博主的文章进行参考。如果和我一样基础较差的，可以参考一下；
> https://www.cnblogs.com/mica/p/10757965.html
> 本次为学习记录，如有错误，请大家指正。

解决方式

第一步

根据官网项目规范，在 src 目录下 创建 store 文件夹及以下文件，如下图。在 modules 中创建业务文件 xxx.js，我这使用 getDicts.js 作为案例。

第二步（store/index.js）

第三步 （main.js中挂载）

第四步

由于只需要在初始的时候调用一次服务器，后期就只要使用，我就在Home.vue中调用。
home.vue为我主业务页的公共页面。

 mounted() {
      this.getDicts();//全局码表设置
    },
 methods: {
      //调用获取码表接口，util.getDicts  接口方法，根据自己的接口定义
      getDicts(){
         util.getDicts([
          "bc_registerType", //登记类型
          "GF2009_00004", //国籍
          "GF2009_00015", //证件种类
          "GF2009_00005", //民族
          "up_sex", //性别
          "GF2009_00006", //文化程度
          "GF2009_00022", // 职业
          "GF2009_00016", // 身份
          "up_whether", //是否
        ]).then((res) => {
        //============主要部分=============
          this.options = res.data
          this.$store.dispatch("getDictsAction",this.options)
          //==========主要部分-结束==============
        })
      }
      }

第五步（getDicts.js）

大家请根据自己的业务需求进行调整。

const getDicts = {
    state: { //设置全局访问的 state 对象，与初始值
        dictsData:{} //可以想成在 store.state下定义一个变量
    },
    getter: { //实时监听 state 值的变化并进行返回
        getDicts: dictsData => {
            return state.dictsData;
        }
    },
    mutations: { //修改 store 中的值唯一的方法
        ADD_DICTS (state,val){
            console.log("mutations",val);
            state.dictsData=val; //设置值
        }
    },
    actions: { //action 提交到 mutations ，不直接变更状态 ，【可异步操作】
        getDictsAction(context, val){
            context.commit('ADD_DICTS',val)  // ADD_DICTS 为 murations 中的方法名
        }
    }
}
export default getDicts;

第六步 页面中使用方式

通过 this.$store.state.getDicts.dictsData 获取数据。

实际问题

由于码表数据较大，页面已经展现，而我在data中赋值的数据就出不来了，通过切换菜单，发现只要一开始刷新的页面出不来数据。
解决方式:通过监听来二次赋值

  "$store.state.getDicts.dictsData":{
        handler: function (val){
          this.options=this.$store.state.getDicts.dictsData;
        }
      }