ホームページ > 記事 > ウェブフロントエンド > vuex でのストアの使用方法の概要 (例付き)

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

不言オリジナル: 2018-08-23 16:56:174280ブラウズ

この記事では、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 &#39;vue&#39;import Vuex from &#39;vuex&#39;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 でのストアの使用方法の概要 (例付き)

関連記事