Vuexの共通知識（まとめ）-Vue.js-php.cn

Vuexの共通知識（まとめ）

以前に vue.js を使用したことがある場合は、vue のさまざまなコンポーネント間で値を渡す苦労を知っているはずです。vue では、vuex を使用して必要な状態を保存できます。値について、vuex でよく使用される知識ポイントをいくつか見てみましょう。皆さんのお役に立てれば幸いです。

1. Vuex を使用する理由

1. 複数のコンポーネントが同じ状態に依存しており、コンポーネント間で通信メソッドを使用することは、多層のネストなど、非常に煩雑になります。コンポーネントです。

2. グローバルに保存する必要があるデータ (ユーザー、権限情報、グローバルシステム設定など)

#2. Vuex の 5 つのコア属性

1 , state: ストレージ状態

// store.jsconst store = new Vuex.Store({ state: { count: 0 }});// 组件里获取count值$store.state.count

ログイン後にコピー

2. getters: state は最初のパラメータとして使用され、他のゲッターは 2 番目のパラメータとして使用されます。戻り値は依存関係に従ってキャッシュされます。これは同等です。 Vue の計算されたプロパティ

// store.jsconst store = new Vuex.Store({ state: { count: 1， sum: 2 }, getters: { getCountAndSum： (state,getters) => { return state.count + state.sum; } }});// 其他组件获取getter$store.getters.getCountAndSum

ログイン後にコピー

3. ミューテーション: 状態 (同期) を変更し、状態を最初のパラメーターとして、ペイロードを 2 番目のパラメーターとして送信します

const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state, obj) { state.count += obj.n; } }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

ログイン後にコピー

4. アクション: 非同期操作 (メソッド)ステータスを直接変更するのではなく、ミューテーションを実行するため)

const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state, obj) { state.count += obj.n; } }, actions: { increment (context) { context.commit('increment'); } }});// 其他组件调用actions的方法$store.dispatch('increment');

ログイン後にコピー

5. モジュール: ストアのサブモジュール

const a = { state: { count: 0 }, getters: { getCount2 (state, getters, rootState) { return state.count + 2; } }, mutations: { increment (state, getters, rootState) { state.count++; } }, actions: { increment (context) { // context.state.count; // context.rootState.count; context.commit('increment'); } }};const b = {};const store = new Vuex.Store({ modules: { a, b }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

ログイン後にコピー

#3. Vuex 補助関数