前言:
后台项目中基本上都有字典管理页面,Vue封装字典数据的主要目的是为了方便数据的管理和使用
不管在哪个页面使用下拉框,el-select的options数据源需要通过调用接口获取到,不同的数据源调用不同的接口,引入和使用都是不小的工作量,如果使用字典数据管理,不管同个页面需要多少数据源,一个方法即可搞定,岂不高效多了。
字典页面的结构代码不贴了,大体如截图所示
左边列表是字典名称,右边列表是字典名称对应的字典标签等数据
1、使用pinia存取数据
使用Pinia在Vue项目中存取字典数据可以提供更好的状态管理和数据共享机制,简化了组件逻辑和渲染过程,同时提供了类型安全和代码提示,拓展了插件和工具支持。这些优势使得代码更加清晰简洁、易于维护
pinia使用模块化的方式将状态分为不同的模块,这种分模块的方式可以提供更好的组织和管理,使状态的结构更清晰和可扩展
store文件夹下新建index.js,和dict.js,
index.js
const store = createPinia()
export default store
**
pinia中定义了使用defineStore函数创建一个独立的store小仓库
defineStore函数接收两个参数,
1、storeName(必需):一个字段串,用于定义store的名称
2、storeOptions(可选):一个对象,包含用于定义store的配置选项
**
modules–dict.js
const useDictStore = defineStore('dict',{
state:()=>({
dict:new Array()
}),
actions:{
// 获取字典
getDict(_key) {
if (_key == null && _key == "") {
return null;
}
try {
for (let i = 0; i < this.dict.length; i++) {
if (this.dict[i].key == _key) {
return this.dict[i].value;
}
}
} catch (e) {
return null;
}
},
// 设置字典
setDict(_key, value) {
if (_key !== null && _key !== "") {
this.dict.push({
key: _key,
value: value
});
}
},
// 删除字典
removeDict(_key) {
var bln = false;
try {
for (let i = 0; i < this.dict.length; i+