Vuex の State と Getters について詳しく学ぶ

Vuex の内部機構は、State、Getter、Mutation、Action、Module の 5 つの部分で構成されています。この記事では、まず Vuex の State と Getter について詳しく説明しますので、お役に立てれば幸いです。

Vuex_State

Vuex は、複数のコンポーネントが状態を共有するのをより便利にするための vue の状態管理ツールです。 [関連する推奨事項: "vue.js チュートリアル "]

インストール

npm install vuex --save复制代码

使用

import Vue from 'vue';import Vuex from 'vuex';

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

状態

単一の状態ツリー、すべてのアプリケーションレベルの状態を含めるには、単一のオブジェクトを使用します。

Vue コンポーネントで Vuex 状態を取得する

Vuex は、ストア オプション (Vue.use(Vuex ) を呼び出す) を通じてコン​​ポーネントから各サブコンポーネントに状態を「注入」するメカニズムを提供します。

ストア オプションをルート インスタンスに登録すると、ルート コンポーネント以下のすべてのサブコンポーネントにストア インスタンスが挿入され、this.$store を通じてサブコンポーネントにアクセスできるようになります。

1832d1c4a53e5db59fd2eed60b317a8f
  {{ $store.state.count }}16b28748ea4df4d9c2150843fecfba68复制代码

mapState 補助関数

コンポーネントが複数の状態を取得する必要がある場合、これらの状態を計算されたプロパティとして宣言することは、多少反復的で冗長になります。この問題を解決するには、mapState ヘルパー関数を使用して計算されたプロパティを生成できます:

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

別の名前を使用します:

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

計算されたプロパティを保存しますプロパティ。ゲッターの戻り値は依存関係に従ってキャッシュされ、依存関係の値が変更された場合にのみ再計算されます。

Getter は、最初のパラメーターとして状態を受け取り、2 番目のパラメーターとしてゲッターを受け取ります。

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

プロパティ経由でアクセス

Getter は、store.getters オブジェクトとして公開されます: this.$store.getters.doubleCount

アクセス経由メソッド

ゲッターにパラメータを渡す関数をゲッターに返させることもできます

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

mapGetters 補助関数

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

ゲッター属性に別の名前を付けたい場合は、オブジェクト形式を使用します:

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

プログラミング関連の知識の詳細については、プログラミング入門を参照してください。 ！

以上がVuex の State と Getters について詳しく学ぶの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。