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

最新推荐文章于 2025-05-23 11:57:34 发布

良月零五

最新推荐文章于 2025-05-23 11:57:34 发布

阅读量4.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/sunshouyan/article/details/107020699

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: