Vue3.0 で Vuex 状態管理を開始する方法をすぐに習得します

Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。集中型ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用して、ステータスが予測可能な方法で変更されるようにします。 Vuex は Vue の公式デバッグ ツール devtools にも統合されており、ゼロ構成のタイムトラベル デバッグ、状態スナップショットのインポートとエクスポートなどの高度なデバッグ機能を提供します。
大規模なシングルページ アプリケーションを開発する予定がない場合は、Vuex の使用は面倒で冗長になる可能性があります。確かに、アプリが十分にシンプルな場合は、Vuex を使用しない方がよいでしょう。必要なのはシンプルなストアパターンだけです。ただし、中規模から大規模のシングルページ アプリケーションを構築する必要がある場合は、コンポーネント外部の状態をより適切に管理する方法を検討する可能性が高く、Vuex が自然な選択になります。

1. 状態

Vuex の状態ストレージはレスポンシブなので、ストア インスタンスから状態を読み取る最も簡単な方法は、計算プロパティで状態を返すことです。

'vue' から { computed } をインポートします
'vuex' から {useStore} をインポートします。
エクスポートデフォルト{
  設定 （） {
    定数ストア = useStore()
    戻る {
      カウント: 計算された(() => store.state.count)
    }
  }
}

ゲッター

Vuex を使用すると、ストア内に「ゲッター」を定義できます (これはストアの計算されたプロパティと考えることができます)。計算プロパティと同様に、ゲッターの戻り値は依存関係に基づいてキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。

'vue' から { computed } をインポートします
'vuex' から {useStore} をインポートします。
エクスポートデフォルト{
  設定 （） {
    定数ストア = useStore()
    戻る {
      double: 計算された(() => store.getters.double)
    }
  }
}

突然変異

Vuex ストア内の状態を変更する唯一の方法は、ミューテーションを送信することです。 Vuex のミューテーションはイベントと非常によく似ています。各ミューテーションには、文字列イベント タイプ (type) とコールバック関数 (handler) があります。このコールバック関数は、実際に状態の変更を行う場所であり、最初の引数として状態を受け取ります。

const ストア = createStore({
  州： {
    カウント: 1
  },
  突然変異:
    増分(状態) {
      状態.count++
    }
  }
})

ミューテーション ハンドラーを直接呼び出すことはできません。このオプションは、イベント登録に似ています。「増分型のミューテーションがトリガーされたら、この関数を呼び出します。」ミューテーション ハンドラーを呼び出すには、対応する型で store.commit メソッドを呼び出す必要があります。

store.commit('増分')

アクション

アクションは、次の点を除いて、ミューテーションに似ています。
アクションは、状態を直接変更するのではなく、突然変異を送信します。
アクションには任意の非同期操作を含めることができます。

定数ストア = 新しい Vuex.Store({
  州： {
    カウント: 0
  },
  突然変異:
    増分(状態) {
      状態.count++
    }
  },
  アクション: {
    インクリメント(コンテキスト) {
      context.commit('増分')
    }
  }
})

アクションは store.dispatch メソッドによってトリガーされます。

store.dispatch('増分')

モジュール

単一の状態ツリーを使用することで、すべてのアプリケーション状態が 1 つの大きなオブジェクトに集中化されます。アプリケーションが非常に複雑になると、ストア オブジェクトが非常に肥大化する可能性があります。
上記の問題を解決するために、Vuex ではストアをモジュールに分割することができます。各モジュールには独自の状態、ミューテーション、アクション、ゲッター、さらにはネストされたサブモジュールがあり、上から下まで同じように分割されています。

定数モジュールA = {
  状態: () => ({ ... }),
  変異: { ... },
  アクション: { ... },
  ゲッター: { ... }
}
定数モジュールB = {
  状態: () => ({ ... }),
  変異: { ... },
  アクション: { ... }
}
const ストア = createStore({
  モジュール:
    a: モジュールA、
    b: モジュールB
  }
})

6. vuex の永続状態

ページを更新してプロジェクトをリロードすると、vuex がリセットされ、すべての状態が初期状態に戻ります。vuex-persistedstate を使用すると、この状況を回避できます。

1. インストール

npm インストール --save vuex-persistedstate

2. 使用

「vuex」からVuexをインポートします。
「vuex-persistedstate」からcreatePersistedStateをインポートします。
定数ストア = 新しい Vuex.Store({
  プラグイン: [createPersistedState()],
});

上記は、Vue3.0 で Vuex 状態管理をすぐに開始する方法の詳細です。Vuex 状態管理の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。