Vue项目的字典值管理

1.Vuex
在store文件夹新建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './log.js' => 'app'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

在store文件夹下，新建一个getters(看上面index.js文件，new Vuex.Store里面有getters和modules)

const getters = {
  // 我这里就不把项目的全部写出来了，写了几个 
  sidebar: state => state.app.sidebar,
  size: state => state.app.size,
  token: state => state.user.token,
  dictObj: state => state.dictStore.dictObj,
}
export default getters

再在store文件夹下，新建一个modules文件夹，在modules文件夹新建我们要管理的字典文件，我这里就叫dictStore.js

const state = {
  dictObj: {},
}
const mutations = {
  SET_DICTOBJ: (state, dict) => {
  state.dictObj = {...state.dictObj, ...dict}
  },
}
const actions = {
  setDictObj({ commit }, dict) {
    commit('SET_DICTOBJ', dict)
  },
}
export default {
  namespaced: true,  // 允许改名
  state,
  mutations,
  actions
}

2.发送请求
有两个地方要使用，一个是在登录文件，一个是在App.vue。如果只在App.vue使用，那么就会一直报401（身份验证），如果只在登录页（login.vue）使用，那么我们在其中一个页面刷新的时候，就不发送请求。
这里是在登录页的代码

// 请求字典的接口
import {dictList} from '@/api/permission/dict'
methods: {
handleLogin() {
      this.$refs.loginForm.validate(async(valid) => {
        if (valid) {
            .then((response) => {
              if(response.errorCode == 412){
          
              }else{
                this.$message({
                  message: '登录成功',
                  type: 'success'
                });
  
                // 登录成功-调用字典接口
                this.getDictList();
              }
            })
            .catch(() => {
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 请求显示所有字典值
        getDictList() {
          let dict = {
          	//  首次请求可以添加常用的
            dictCode: 'DICT_XZQHDM,GCF_HX,'
          }
          dictList(dict).then(response => {
            Object.keys(response[0]).forEach(v => {
              // 除了行政区划不用转成Number类型，其他的都要转
              if(v !== 'DICT_XZQHDM') {
                for(let i = 0; i < response[0][v].length; i++) {
                  response[0][v][i].code = Number(response[0][v][i].code)
                }
              }
            })
            this.$store.dispatch('dictStore/setDictObj', response[0])
          }).catch((e) => {
            this.$message.error('获取数据失败：' + e)
          })
        },
}

这里是App.vue的代码

import { getToken } from "@/utils/auth"; // get token from cookie
import { dictList } from "@/api/permission/dict";
  created() {
    const hasToken = getToken();
    // 判断有无token,只有登录过后才请求，不然一直报401
    if (hasToken) {
      this.getDictList();
    }
  },
  methods: {
    // 请求显示所有字典值
    getDictList() {
      let dict = {
        dictCode:
          "DICT_XZQHDM,GCF_HX",
      };
      dictList(dict)
        .then((response) => {
          Object.keys(response[0]).forEach((v) => {
            // 除了行政区划不用转成Number类型，其他的都要转
            if (v !== "DICT_XZQHDM") {
              for (let i = 0; i < response[0][v].length; i++) {
                response[0][v][i].code = Number(response[0][v][i].code);
              }
            }
          });
          this.$store.dispatch("dictStore/setDictObj", response[0]);
        })
        .catch((e) => {
          this.$message.error("获取数据失败：" + e);
        });
    },
  },

3.页面使用

// 在页面使用
<template>
<el-form-item label="房屋性质" prop="fwxz">
   <el-select
   v-model="params.fwxz"
   placeholder="请选择房屋性质"
   style="width: 100%"
   >
     <el-option
     v-for="(item, index) in dictObj['GCF_FWXZ']"
     :key="index"
     :label="item.name"
      :value="item.code"
     ></el-option>
  </el-select>
</el-form-item>
</template>

// 引入vuex
import { mapState } from 'vuex'
// 如果我们在最开始请求的时候，没有请求想要的字典，那么就要自己添加
import { dictList } from "@/api/permission/dict";
  created() {
	// 判断vuex里面时候有改字典，如果有（因为可能其他页面请求了，这里就不用重复请求了），就不发送请求，直接用
    if(!this.dictObj['GCF_BJXMLX']) {
      this.getDictList();
    }
  },
  // 在计算属性里面使用
  computed: {
    ...mapState(
      {
        dictObj: state => state.dictStore.dictObj
      }
    )
  },
    // 请求显示所有字典值
    getDictList() {
      let dict = {
        dictCode: 'GCF_BJXMLX'
      }
      dictList(dict).then(response => {
        Object.keys(response[0]).forEach(v => {
          for(let i = 0; i < response[0][v].length; i++) {
              response[0][v][i].code = Number(response[0][v][i].code)
          }
        })
        this.$store.dispatch('dictStore/setDictObj', response[0])
      }).catch((e) => {
        this.$message.error('获取数据失败：' + e)
      })
    },

大概就这些吧！！！

Vue项目的字典值管理

悦读