在Vue项目中，关于服务端请求的数据字典（字典值）存放vuex

1、问题描述

在Vue或React项目中经常会遇到比如下拉框的数据字典之类的，都是每次在使用的时候实时像服务端请求还是请求一次后将数据放在Vuex还是放在localStorage之类的地方的？如果字典值数据量比较大的话会不会对前端造成负担？项目中的页面经常会和数据字典的值进行查询，一个一个去用ajax去请求，无疑很浪费时间。

2、理解vuex的五个核心概念

• state // 状态树，基本数据定义, 类似组件中的data
• getter // 理解为store中的计算属性，类似组件中的computed
• mutation // 可以直接更改store中的状态的唯一方法是提交mutation
• action // 负责控制提交mutation，而自己不能直接更改state
• module // 负责模块化管理

this.$store.dispatch() 与 this.$store.commit()方法的区别总的来说他们只是存取方式的不同,两个方法都是传值给vuex的mutation改变state

3、解决思路

把数据字典的数据拼成一个json数组，请求接口查字典，用于格式化数据。在查字典接口里，第一次会把请求数据缓存起来存入json数组，以便调用时，先从缓存里拿字典数据，如果缓存没有，才会发起请求。

4、解决过程

1. src创建store文件夹
2. store文件夹具体结构如下图：
3. store/dictData.json为存放数据字典的json
4. store/modules/index.js 为vuex文件，将json引入此文件，(vuex的action里 调用axios的promise方法并return出去方便组件调用)代码如下：

   import Vue from "vue";
   import Vuex from "vuex";
   import dict from "./dictData.json";//引入缓存的数据字典json
   import {fetchPost} form "../api/axiosConfig.js"//自己封装的axios   fetchPost(url, params,timeout)
   
   Vue.use(Vuex);
   
   export default new Vuex.Store({
       state:{
           //数据字典
          option:dict
       
       },
       mutation:{
           setOptions(state, obj){
               let {key, value} = obj;
               try{
                   state.options[key] = value;
               }catch (error) {
                   console.log(error);
               }
           }
       },
       actions: {
           /**
           * action函数可以接收一个与store实例具有相同方法的属性context
            *   context:{    //{Object} store对象  更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
   		 *       state,   等同于store.$state，若在模块中则为局部状态
   		 *       rootState,   等同于store.$state,只存在模块中
   		 *       commit,   等同于store.$commit,必须在mutations中同步操作
   		 *       dispatch,   等同于store.$dispatch,dispatch：可以异步操作，例如向后台提交数据
   		 *       getters   等同于store.$getters
            *    }
           *  args   // Array 需要请求的字典keys集合
           *  new Promise() 内的参数是函数,可以将异步方法按一定的顺序执行 ,即（resolve,reject）=> {     } ;
           *  有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
           * resolve =》 是个函数，异步成功时调用，并将异步操作的结果返回出去;reject  =》 是个函数，异步失败时调用
           */
           getOptions(context,args){
               return new Promise(（resolve, reject） => {
                   let dict = context.state.options;//数据字典JSON
                   let params = args.reduce((o, v, i) => {
                       if(dict[v]&&dict[v].length == 0){   //当缓存中没有时添加到请求中
                           o.push(v);
                       }
                       return o;
                   },[]);
                   if(params.length === 0) {    //当缓存中存在时从缓存中拿数据
                       resolve(true);
                       return false;
                   }
                   fetchPost("/api/queryDictSorts",{dictSortCode:param.join(";")})//请求新数据字典存入vuex中
                   .then(
                       res => {
                           params.map(v => {
                               context.commit("setOptions",{
                                   key:v,
                                   value:res.data[v]||[]
                               });
                           });
                           resolve(true,res);//第一个参数告诉调用处，数据字典请求成功
                       },
                       err => {
                           reject(err);
                       }
                   )
                   .catch(err => {
                          reject(err);
                      }
                   )
               });
           }
       }
   })

   5、在需要请求数据字典的页面调用该方法，调用方法如下：

   created(){
       //请求数据字典"one","tow"
       this.$store.dispatch("getOptions",["one","tow"])
       .then(result => {console.log(result);});
       .catch(err => {console.log(err);});
   },
   computed:{
       oneList(){
           return this.$store.state.options.one || [];
       },
       towList(){
           return this.$store.state.options.tow|| [];
       },
   }