vuejs でグローバル状態管理を実装する方法

Vuex を使用すると、vuejs でグローバルな状態管理を実現できます。Vuex は、Vue.js アプリケーション用に特別に開発された状態管理モデルです。グローバル データの管理や、複雑なアプリケーションのデータ ステータスの管理に使用できます。 Brother としてのコンポーネントの通信、多層ネストされたコンポーネントの値の受け渡しなど。

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuex グローバル状態管理

Vuex それは、Vue.js アプリケーション専用に開発された 状態管理パターンです。兄弟コンポーネント間の通信、多層のネストされたコンポーネント間の値の転送など、複雑なアプリケーションのデータ状態を管理できます。

vuex は、わかりやすく言うと、グローバル データ管理です。グローバル データを管理するために使用されます。Vue 独自のデータ管理では、親コンポーネントと子コンポーネントの間でしかデータを転送できず、不便です。グローバル データ管理には vuex を使用します。すべてのデータvuex に保存され、使用時に呼び出されます。

vuex のコア:

state
• mutations
• actions
• getter

Vuex の使用方法

vuex をインストールして使用します

インストール

1. プロジェクトにインストールします

npm install vuex --save

2. 新しいstore.jsファイルを作成します

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      //存放初始数据
    count: 0
  },
  mutations: {
      //存放修改数据的方法
    increment (state) {
      state.count++
    }
  }
})

データを使用する

方法 1: $store 呼び出しを使用する

this.$store.state をコンポーネント内で直接使用して呼び出します。 data

this.$store.state.数据名

方法 2: mapState をインポートし、コンポーネント内のデータを展開してマッピングします。計算された属性に書き込む必要があります。使用する場合は、count と記述するだけです。

//先导入mapState
import {mapState} from 'vuex'

computed:[
    ...mapState(['count'])
]

データを操作する場合、状態データを直接呼び出すことはできません。データを変更したい場合は、ミューテーションにメソッドを記述する必要があります。目的は、それを行うことです。

ミューテーションの機能と使用方法

ミューテーションは、操作するメソッドを作成することです。 data

  mutations: {
//存放修改数据的方法
   add(state) {
     state.count++
   }
 }

使用方法 1:

ミューテーション関数をトリガーし、commit を使用して

this.$store.commit This 内のメソッド名を呼び出します。は、ミューテーションをトリガーする最初の方法です

methods:{
   handle(){
       this.$store.commit('add')
   }
}

mutations pass パラメータ mutation メソッドには 2 つのパラメータを渡すことができます。1 つ目は state で、2 つ目はカスタム パラメータ payload

  mutations: {
//存放修改数据的方法
   addN(state，N) {
     state.count+=N
   }
 }

呼び出しはコンポーネント メソッド内にあります

methods:{
   handle2(){
       //触发mutation并传参
       this.$store.commit('addN',4)
   }
}

メソッド 2 を使用します

vuex の mapMutations 関数をコンポーネントにインポートします

mapMutations(['sub']) は内部のメソッド間の比較であり、ストア内のメソッドはマップされます

...これは展開演算子です

import {mapMutations} from 'vuex'

methods:{
   //将方法名写在[]里  ['addN','sub']
   ...mapMutations(['sub'])
   btnhandle(){
       //调用时直接写this.方法名
       this.sub()
       //当传入参数时，直接写这个参数，不需要写state
       this.addN(4)
   }
}

注: Mutation 関数では非同期コードを記述することはできません。たとえば、ページは変更されますが、実際のステータス値は変更されない、時間指定された関数を記述することはできません。そこで、アクションを使用します。

アクション

アクションは、非同期タスクを処理するために使用されます。

データが非同期操作で変更される場合は、ミューテーションではなくアクションを通じて変更する必要があります。ただし、データは、アクションでミューテーションをトリガーすることで間接的に変更する必要があります。ストア内のミューテーションと同じレベルです。アクションを作成します:{ } その中でミューテーション メソッドを呼び出し、コンポーネントでアクションをトリガーします

  mutations: {
  //存放修改数据的方法
    add(state) {
      state.count++
    }
  },
  actions:{
      //context是上下文
      addAsync(context){
          setTimeout(()=>{
              //调用add方法，actions中不能直接修改state中的数据，只有mutation有这个权力
              context.commit('add')
          })
      }
  }

アクションを使用します

コンポーネントでディスパッチを使用して、トリガー

btnHandle(){
    //dispatch专门触发action
    this.$store.dispatch('addAsync')
}

アクションでパラメータを転送

ストアアクションとミューテーションに仮パラメータを記述する

  mutations: {
  //传参
    addN(state,n) {
      state.count+=n
    }
  },
  actions:{
      //context是上下文
      addAsync(context,n){
          setTimeout(()=>{
              //调用add方法，并传参
              context.commit('addN',n)
          })
      }
  }

コンポーネントに実際のパラメータを記述する

btnHandle(){
    //dispatch专门触发action,并传入参数
    this.$store.dispatch('addAsync',5)
}

2 つ目は、展開してマップすることです。

mapActions の導入

//引入方法
import {mapActions} from 'vuex

methods:{
    //映射actions
    ...mapActions(['addAsync'])
    btnhandle(){
        //调用对应的actions
        this.addAsync()
    }
}
//也可以不写btnhandle方法了直接将映射的方法名写在点击操作上

Note

: コンポーネントでアクション メソッドを呼び出し、アクションで commit を使用してミューテーション メソッドを呼び出します

getters

Getter は、ストア内のデータを処理して新しいデータを形成するために使用されます。元のデータは変更されません

Getter は、Vue の計算プロパティと同様に、ストア内の既存のデータを処理して新しいデータを形成できます。
• ストア内のデータが変更されると、それに応じてゲッター データも変更されます。

• state:{
     count:0
  },
  getters:{
     showNum(state){
         return '当前最新的数据是:'+state.count
     }
  }

• 最初の呼び出しメソッド

: this.$store.getters。メソッド名

this.$store.getters.showNum

2番目の呼び出しメソッド

: マッピング拡張、計算されたマッピング

import {mapGetters} from 'vuex'

computed:{
   ...mapGetters(['showNum'])
}

要約

state

は、初期データを保存し、データの初期化を実行するために使用されます。コンポーネントを保存するコンポーネント
• mutations
で state を直接呼び出さないことをお勧めしますdata 操作を実行するためのメソッドですが、非同期操作は実行できません
• actions
非同期操作を実行するためのメソッドがあります
• getter
は、次のデータに使用されますストア 新しいデータを形成するための処理を実行します。
• 関連する推奨事項:「
vue.js チュートリアル

」

以上がvuejs でグローバル状態管理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。