[vue3] Получить данные словаря и инкапсулировать их как общедоступный метод

Предисловие:

В основном в фоновом проекте есть страницы управления словарями.Основная цель инкапсуляции данных словаря Vue — облегчить управление данными и их использование.

Независимо от того, на какой странице используется раскрывающийся список, источник данных параметров el-select необходимо получить, вызвав интерфейс.Разные источники данных вызывают разные интерфейсы, а введение и использование не являются малой рабочей нагрузкой.Если вы используете Управление данными словаря, независимо от того, сколько источников данных необходимо для страницы, можно сделать одним методом, не будет ли это намного эффективнее.

Код структуры страницы словаря не вставляется, как показано на скриншоте

Список слева - название словаря, а список справа - метка словаря, соответствующая названию словаря и другим данным

1. Используйте pinia для доступа к данным

Использование Pinia для доступа к данным словаря в проектах Vue может обеспечить лучшее управление состоянием и механизмы обмена данными, упростить логику компонентов и процессы рендеринга, обеспечить безопасность типов и подсказки по коду, а также расширить поддержку подключаемых модулей и инструментов. Эти преимущества делают код более ясным, лаконичным и простым в обслуживании.

Pinia использует модульный подход для разделения состояния на различные модули.Этот подмодульный подход может обеспечить лучшую организацию и управление, делая структуру состояний более четкой и расширяемой.

Создайте новые index.js и dict.js, index.js в папке хранилища.

const store = createPinia()

export default store

**

Pinia определяет использование функции defineStore для создания небольшого склада независимого магазина.

Функция defineStore получает два параметра:
1. storeName (обязательно): строка поля, используемая для определения имени магазина.
2. storeOptions (необязательно): объект, содержащий параметры конфигурации, используемые для определения хранилища.

**
модули – 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+