Prefacio:
Básicamente, hay páginas de gestión de diccionarios en el proyecto de fondo. El objetivo principal de Vue encapsulando datos de diccionario es facilitar la gestión y el uso de datos.
No importa en qué página se use el cuadro desplegable, la fuente de datos de opciones de el-select debe obtenerse llamando a la interfaz. Diferentes fuentes de datos llaman a diferentes interfaces, y la introducción y el uso no son una carga de trabajo pequeña. Si usa gestión de datos del diccionario, no importa cuántas fuentes de datos se necesitan para una página se puede hacer en un método, ¿no sería mucho más eficiente?
El código de estructura de la página del diccionario no está pegado, como se muestra en la captura de pantalla.
La lista de la izquierda es el nombre del diccionario y la lista de la derecha es la etiqueta del diccionario correspondiente al nombre del diccionario y otros datos.
1. Usa pinia para acceder a los datos
El uso de Pinia para acceder a los datos del diccionario en los proyectos de Vue puede proporcionar una mejor gestión del estado y mecanismos de intercambio de datos, simplificar la lógica de los componentes y los procesos de representación, proporcionar seguridad de tipo y sugerencias de código, y ampliar la compatibilidad con complementos y herramientas. Estas ventajas hacen que el código sea más claro, más conciso y más fácil de mantener.
Pinia utiliza un enfoque modular para dividir el estado en diferentes módulos. Este enfoque de submódulos puede proporcionar una mejor organización y gestión, haciendo que la estructura del estado sea más clara y extensible.
Cree nuevos index.js y dict.js, index.js en la carpeta de la tienda
const store = createPinia()
export default store
**
Pinia define el uso de la función defineStore para crear un pequeño almacén de tienda independiente
La función defineStore recibe dos parámetros,
1. storeName (obligatorio): una cadena de campo utilizada para definir el nombre de la tienda
2. storeOptions (opcional): un objeto que contiene opciones de configuración utilizadas para definir la tienda
**
módulos–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+