vuex をコンポーネントと組み合わせて使用​​する方法

今回は、vuex とコンポーネントを併用する方法と、vuex とコンポーネントを併用する際の注意点について説明します。以下は実践的なケースですので、見てみましょう。

公式定義: Vuex は、Vue.js アプリケーション専用に開発された状態管理パターンです。私の理解では、vuex はフロントエンド データベースです。

1. まず、コアとなるのは倉庫であり、状態が含まれるため、最初のステップは新しいストアを作成することです。

表示インターフェイス:

ここで、state は、すべてが保管されている倉庫ストアです。

2. ステートからデータを取得するには Lodash を使用する方が便利です。構文は次のとおりです。

vuex のゲッターと構文を使用することもできます。

属性、メソッドによるアクセスなど。 https://vuex.vuejs.org/zh-cn/getters.html

3. vuex にデータを保存します。ミューテーションを使用する場合、Vuex ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。

文法:

コンポーネント内の構文:

これは、次のような 2 つのパラメーターを受け入れます。1 つは状態、もう 1 つはロード (つまり、オブジェクトの形式で渡したい任意の値) です。

上記の例では、「open_table_layer」はメソッドです。このメソッドで受け入れられるパラメータは、1: 状態、2: 受信する {index:. 。 。 。 。 } (上の図)

メソッドの構文;

この記事の事例を読んだ後は、メソッドを習得できたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

React が React-router ルーティングでログイン検証制御を実装する方法

React ルーティング管理と React Router の使用方法の詳細な説明

以上がvuex をコンポーネントと組み合わせて使用​​する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。