vuex の 5 つの属性とは何ですか

vuex の 5 つの属性は次のとおりです: 1. state 属性は変数を格納するために使用されます; 2. getters 属性は state の計算された属性に相当します; 3. mutations 属性は更新データを送信するために使用されます; 3. mutations 属性は更新データを送信するために使用されます。 4. アクション属性 ;5. モジュール属性、モジュラー vuex に使用されます。

#推奨: 「

vue チュートリアル」

vue での vuex の 5 つの属性と基本的な使用法

VueX は、Vue.js アプリケーション用に特別に設計された状態管理フレームワークで、各 vue コンポーネントの変更可能な状態を一元的に管理および維持します (vue コンポーネント内のデータとして理解できます)。

Vuex には 5 つの中心的な概念があります:

state,getter,mutations,アクション、モジュール。

1. state: vuex の基本データ、変数の格納に使用されます

2. geeter: 基本データ (state) から派生したデータ、state の計算された属性に相当します

3. 突然変異: 更新されたデータを送信するメソッドは同期的である必要があります (アクションを非同期的に使用する必要がある場合)。各ミューテーションには、文字列イベント タイプ (タイプ) とコールバック関数 (ハンドラー) があります。

コールバック関数は実際に状態を変更する場所であり、最初のパラメータとして状態を受け入れ、2 番目のパラメータとしてペイロードを送信します。

4. アクション: 機能はミューテーションとほぼ同じですが、違いは ==》1. アクションは状態を直接変更するのではなく、ミューテーションを送信します。 2. アクションには、任意の非同期操作を含めることができます。

5. モジュール: モジュール型 vuex を使用すると、各モジュールが独自の状態、ミューテーション、アクション、ゲッターを持つことができるため、構造が非常に明確になり、管理が容易になります。

Vuex の使用方法:

新しい vue プロジェクト testApp を作成 ==>>testApp でストア ファイルをビルド==>>ストア ファイルの下に modules フォルダーと getter.js と Index.js があります== 》ストアファイル配下にuser.jsを構築します

'./store'からプロジェクトインポートストアのmain.jsに導入します

以下のindex.jsに導入します。ファイルの保存

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import global from './modules/global'
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store
　　在store文件下的getters.js中引入
const getters = {
  self: state => state.user.self,
  token: state => state.user.token,
  currentCommunity: (state, getters) => {
    let cid = getters.currentCommunityId
    return getters.communities.filter(item => {
      return item.communityId === cid
    })
  }
}
export default getters
　　在modules文件下的user.js写代码
const user = {
        state:{
            self: null,
            token: '',
        },
        mutations:{
            SET_SELF: (state, self) => {
                 state.self = self
             },
             SET_TOKEN: (state, token) => {
                 state.token = token
             }
        },
        actions:{
             login ({ commit }, res) {
                  commit('SET_SELF', res.self)
                  commit('SET_TOKEN', res.token
            }       
}
export default user

データを保存するには、次の 2 つの方法を使用します:

　　dispatch：异步操作，写法： this.$store.dispatch('mutations方法名',值)
　　commit：同步操作，写法：this.$store.commit('mutations方法名',值)

以上がvuex の 5 つの属性とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。