ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。