vue之利用vuex实现前端字典库应用篇

vuex官方参考文档vuex官方给出的定义是状态管理模式，但我自己更愿意理解为前端可以增删改状态的临时数据库（ps：仅代表个人理解不一定正确），准确的含义还请参考官方给出的文档： https://vuex.vuejs.org/zh/理解vuex的五个核心概念state// 状态树，基本数据定义, 类似组件中的datagetter// 理解为store中的计算属性，类似组件中的computedmut

良月零五

4162人浏览 · 2020-06-29 17:21:39

良月零五 · 2020-06-29 17:21:39 发布

vuex官方参考文档

vuex官方给出的定义是状态管理模式，但我自己更愿意理解为前端可以增删改状态的临时数据库（ps：仅代表个人理解不一定正确），准确的含义还请参考官方给出的文档： https://vuex.vuejs.org/zh/

理解vuex的五个核心概念

state // 状态树，基本数据定义, 类似组件中的data
getter // 理解为store中的计算属性，类似组件中的computed
mutation // 可以直接更改store中的状态的唯一方法是提交mutation
action // 负责控制提交mutation，而自己不能直接更改state
module // 负责模块化管理
简略的说一下vuex中的五个核心概念，因为只有理解了vuex的这五个核心概念都是负责做什么，才知道何时该用哪个方法，更多具体详情参考vuex的官方介绍和概念。

vuex具体应用场景示例

利用vuex实现前端静态枚举的字典库
利用vuex实现用户登陆权限菜单读取和存储
利用vuex实现多标签页面管理功能
利用vuex实现复杂的流程图绘制功能
本篇文章主要介绍第一种情况，利用store充当前端字典库的应用，其他三种使用场景，后续会陆续以单个功能篇章详细介绍。

小伙伴功能开发的过程中，肯定遇到过下拉框列表枚举、枚举字段转换文本等情况，不是所有的数据后端都会存储或转换，而前端又多个页面都会需要，如果每个页面都单独定义一次，一旦发生变化后期维护比较麻烦，这种情况我们就可以利用vuex的模块化管理，定义一个前端的字典库，作为全局引入即可。
具体实现步骤如下：

vuex依赖安装

D:\node\myDemo>cnpm install vuex -S
√ Installed 1 packages
√ Linked 1 latest versions
√ Run 0 scripts
√ All packages installed (2 packages installed from npm registry, used 546ms(network 543ms), speed 65.17kB/s, json 2(35.39kB), tarball 0B)

vuex模块化文件组成结构

src创建store文件夹
store文件夹具体结构如下图：
store/modules 按照功能模块在modules创建新的文件夹来管理对应模块
store/modules/index.js 引入对应模块，代码如下：

import auth from './auth'
import tagNav from './tagNav'
import basic from './basic'
import graphs from './graphs'
export default {
    auth: auth,
    tagNav: tagNav,
    basic: basic,
    graphs: graphs,
}

store/index.js 负责全局初始化vuex，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import vuexModules from './modules'
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
    getters,
    mutations,
    actions,
    modules: vuexModules
})

本篇文章要着重介绍的vuex实现字典库功能，如上图以basic模块管理，具体代码如下：

store/modules/basic/index.js 代码如下：

import axios from '@/util/ajax'
const state = {
    // 全局系统参数
    sysInfo:[],
    // 设备类型
    deviceType:[],
    // 运营商列表
    operatorMenu:[{
        value: 0,
        text: '中国移动',
    },{
        value: 1,
        text: '中国联通',
    },{
        value: 2,
        text: '中国电信',
    }],
    // 站点状态
	siteState:[
        {
            value:'0',
            name:'在线'
        },
        {
            value:'1',
            name:'离线'
        },
        {
            value:'2',
            name:'异常'
        },
        {
            value:'3',
            name:'掉电'
        },
    ],
    // 性别菜单
    generMenu:[{
        value: 1,
        text: '男性',
    },{
        value: 2,
        text: '女性',
    },{
        value: 9,
        text: '未知性别',
    }],
    // 任务状态
    taskStatus:[
        {
            value:0,
            name:'未开始'
        },
        {
            value:1,
            name:'处理中'
        },
        {
            value:2,
            name:'已完成'
        },
        {
            value:3,
            name:'异常'
        },
    ],
}
const getters = {
    //读取性别名称
    getGenerName: (state)=> (code)=>{
        if(code!=null || code!=undefined) {
            let arr = state.generMenu.filter(item=> item.value ==  parseInt(code));
            return arr[0].text;
        } else {
            return '-';
        }
    },
    // 获取任务状态名称
    getTaskStatusName: (state)=> (code)=>{
        if(code!=null || code!=undefined) {
            let arr = state.taskStatus.filter(item=> item.value == parseInt(code));
            return arr[0].name;
        } else {
            return '-';
        }
    },
}
const mutations = {
    setSysInfo: (state, data) => {
        state.sysInfo       = data;
    },
    setDeviceType: (state, data) => {
        state.deviceType       = data;
    },
}
const actions = {
    // 获取字典库菜单列表
    getSysInfo({ commit }) {
        return axios.get({
            url:'/api/sysInfo',
            data:'',
        }).then((res)=>{
            if(res && res.data){
                let sysInfo = {};
                res.data.forEach(item => {
                    sysInfo[item.pkey] = item;
                });
                commit("setSysInfo", sysInfo);
                if(sysInfo.SP_SYSTEM_SOURCE && sysInfo.SP_SYSTEM_SOURCE.pvalue) {
                    let deviceType = JSON.parse(sysInfo.SP_SYSTEM_SOURCE.pvalue);
                    commit("setDeviceType", deviceType);
                }
                return res;
            }
        });
    },
}
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

以上示例中，actions包括了全局系统参数通过Api接口请求, 再利用vuex做数据存储功能，然后vue-router初始化的时需要使用store.dispatch(‘basic/getSysInfo’).then(()=>{})分发，在前置守卫做判断处理，降低这种低频率数据的重复请求。

main.js 中全局引入store

import Vue form 'vue'
import App form './App'
import router form './router'
import store form './store'
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,
  components: {App},
  template: '<App/>'
})

组件中应用字典库

src/views/test.vue文件应用代码：

<template>
	<div>
	   <ul>
	     <li v-for="v in taskStatusMenu" :key="v.value">{{v.name}}</li>
	   </ul>
	   <ul>
	     <li v-for="v in siteStateMenu" :key="v.value">{{v.name}}</li>
	   </ul>
	</div>
</template>
<script>
export default {
    data() {
        return {
            // 任务类型菜单
            siteStateMenu: this.$store.state.basic.siteState,
            // 任务状态菜单
            taskStatusMenu: this.$store.state.basic.taskStatus,
        }
   }
}
</script>

Api中应用字典库转换文本

src/api/testApi.js文件中使用vuex的计算属性实现字符转换，示例代码如下：

import axios from '@/util/ajax';
import store from '../store'
export function getAllList(params) {
  return axios.post({
    url: '/api/getlist',
    data: params,
  }).then((res) => {
    if (res.data.total > 0) {
      res.data.results.forEach((item, index) => {
        res.data.results[index].gener_name = store.getters['basic/getGenerName'](item.gender);
      });
    }
    return res;
  });
}

以上所有步骤，看起来有点多，但都本博主用心整理方便新手一步一步理解使用过程。前面的过程理解和熟练后，后面利用vuex实现功能其实主要在第6、8、9步中，实现和使用起来很方便的。

补充内容：vue提供简化版

以上中this.$store.state.basic.siteState 其实写多了，感觉太长有点冗长，其实vue提供了简化版的使用方式，小伙伴也可以直接使用。
mapState ;
mapGetters;
mapActions;
mapMutations
src/views/test.vue 使用map代码如下：

<template>
	<div>
	   <ul>
	     <li v-for="v in taskStatusMenu" :key="v.value">{{v.name}}</li>
	   </ul>
	   <ul>
	     <li v-for="v in siteStateMenu" :key="v.value">{{v.name}}</li>
	   </ul>
	</div>
</template>
<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
export default {
   data() {
        return {
        
        }
   },
   computed: {
       ...mapState({
		   siteStateMenu: state=> state.basic.siteState,
	       taskStatusMenu: state=> state.basic.taskStatus
		}),
	   ...mapGetters([
	        'basic/getGenerName'
	   ])
   },
   methods: {
       ...mapMutations([
           'basic/setSysInfo'
       ]),
       ...mapActions([
           'basic/getSysInfo'
       ])
   },
   mounted() {    
	   this.changeSysInfo({
	        SYS_NAME: 'CE SHI',
	        SYS_VERSION: '1.0.0.1'
	   })
	}
}
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^