vuex でのストアの使用方法の概要 (例付き)

この記事では、vuex でのストアの使用方法を紹介します (例付き)。必要な方は参考にしていただければ幸いです。

1.ステータス管理(vuex)の紹介
vuex は、vue.js アプリケーション専用に開発された状態管理モデルです。集中ストレージを使用してアプリケーションのすべてのコンポーネントのステータスを管理し、対応するルールを使用してステータスが予測可能な方法で変化することを保証します。 Vuex は、Vue の公式デバッグ ツール devtools 拡張機能も統合しており、ゼロ構成のタイムトラベル デバッグ、ステータス スナップショットのインポートおよびエクスポートなどの高度なデバッグ機能を提供します。

2. 状態管理コア
状態管理には、状態、ゲッター、ミューテーション、アクション、モジュールの 5 つのコアがあります。それぞれを簡単に紹介します:
1. state は単一の状態ツリーです。state では、管理する必要がある配列、オブジェクト、文字列などを定義する必要があります。これらがここで定義されている場合にのみ、定義したオブジェクトの状態を vue で取得できます。 jsコンポーネント。
2.ゲッター
Getter は、vue.js の計算されたプロパティに似ています。ストアの状態から何らかの状態を取得する必要がある場合、Getter は最初のパラメーターとして状態を受け取り、getter の戻り値に基づきます。依存関係に応じてキャッシュされ、ゲッターの依存関係の値 (取得する必要がある状態の値) が変更された場合にのみ再計算されます。
3. 突然変異
ストアの状態を変更する唯一の方法は、ミューテーションを送信することです。これはイベントと非常によく似ています。各ミューテーションには文字列型のイベント タイプとコールバック関数があります。状態の値を変更する必要がある場合は、コールバック関数で変更する必要があります。このコールバック関数を実行したい場合は、対応する呼び出しメソッド、store.commit を実行する必要があります。
4. アクション
アクションはミューテーションを送信でき、store.commit はアクションで実行でき、非同期操作もアクションで実行できます。ページでこのアクションを使用したい場合は、store.dispatch
5、モジュール
を実行する必要があります。 モジュールは実際には、状態が非常に複雑で肥大化している場合にのみ問題を解決します。モジュールはストアをモジュールに分割でき、各モジュールには独自の状態、ミューテーション、アクション、ゲッターがあります。

3. 例

1. まずstore.jsを作成し、vuexを導入します

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = {   
userInfo: {}
}const mutations = {
    updateUserInfo(state, infos) {
        state.userInfo= infos
    }
}
export default new Vuex.Store({
    state,
    mutations
})

このような簡単なstore.jsが完成しました。

この確立された状態管理をインターフェースでどのように使用しますか?

1. データを設定 (更新)

首先在script下引入store.js
<script>
import store from &#39;store.js的路径&#39;import { 
mapMutations 
} 
from &#39;vuex&#39;methods:{
    ...mapMutations([        
    &#39;updateUserInfo&#39;
    ])
}
</script>

データを更新する必要がある場所を更新します

this.updateUserInfo(data)

2. データを取得します

<script>
import store from &#39;store.js的路径&#39;import { 
mapState 
} 
from &#39;vuex&#39;computed: {
   ...mapState({
        userInfo: &#39;userInfo&#39;
   })
},
created() {
    console.log(this.userInfo)
}
</script>

作成された || マウントされたメソッドで必要なデータを取得します

注: 同じページでデータを設定および取得することもできます

関連する推奨事項:

簡単な vuex とモジュール化を学習します

Vue。 js-vuex (状態管理)

以上がvuex でのストアの使用方法の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。