[vue3] 辞書データを取得してパブリックメソッドとしてカプセル化する

序文：

基本的にバックグラウンドプロジェクトには辞書管理ページがあり、辞書データをカプセル化する Vue の主な目的は、データの管理と使用を容易にすることです。

どのページのドロップダウンボックスを使用する場合でも、el-selectのオプションデータソースはインターフェースを呼び出して取得する必要があり、データソースが異なれば呼び出されるインターフェースも異なり、導入と使用の負担は小さくありません。辞書データの管理は、同じページに必要なデータソースの数が 1 つの方法で実行できるのであれば、はるかに効率的ではないでしょうか。

スクリーンショットにあるように、辞書ページの構造コードは貼り付けられていません。
ここに画像の説明を挿入
左側のリストが辞書名、右側のリストが辞書名とその他のデータに対応する辞書ラベルです。

1. pinia を使用してデータにアクセスする

Pinia を使用して Vue プロジェクトの辞書データにアクセスすると、より優れた状態管理とデータ共有メカニズムが提供され、コンポーネントロジックとレンダリングプロセスが簡素化され、タイプセーフティとコードヒントが提供され、プラグインとツールのサポートが拡張されます。これらの利点により、コードがより明確、より簡潔になり、保守が容易になります。

Pinia は、モジュール型アプローチを使用して状態をさまざまなモジュールに分割します。このサブモジュールアプローチにより、より適切な組織化と管理が提供され、状態構造がより明確になり、拡張可能になります。

ストアフォルダーの下に新しいindex.js、dict.js、
ここに画像の説明を挿入
index.jsを作成します

const store = createPinia()

export default store

Pinia は、独立した店舗の小規模倉庫を作成するための defineStore 関数の使用を定義します

defineStore 関数は 2 つのパラメータを受け取ります。
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+