vuejs でグローバル状態管理を実装する方法-Vue.js-php.cn

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

青灯夜游

リリース： 2023-01-13 00:45:26

オリジナル

3159 人が閲覧しました

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

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

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

vuex グローバル状態管理

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

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

vuex のコア:

mutations
actions
getter

Vuex の使用方法

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

インストール

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

npm install vuex --save

ログイン後にコピー

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

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

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 &#39;vuex&#39;

computed:[
    ...mapState([&#39;count&#39;])
]

ログイン後にコピー

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

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

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

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

ログイン後にコピー

使用方法 1:

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

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

methods:{
   handle(){
       this.$store.commit(&#39;add&#39;)
   }
}

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

メソッド 2 を使用します

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

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

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

import {mapMutations} from &#39;vuex&#39;

methods:{
   //将方法名写在[]里  [&#39;addN&#39;,&#39;sub&#39;]
   ...mapMutations([&#39;sub&#39;])
   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(&#39;add&#39;)
          })
      }
  }

ログイン後にコピー

アクションを使用します

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

btnHandle(){
    //dispatch专门触发action
    this.$store.dispatch(&#39;addAsync&#39;)
}

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

mapActions の導入

//引入方法
import {mapActions} from &#39;vuex

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

ログイン後にコピー

Note

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

getters

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

state:{
   count:0
},
getters:{
   showNum(state){
       return &#39;当前最新的数据是:&#39;+state.count
   }
}

ログイン後にコピー

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

this.$store.getters.showNum

ログイン後にコピー

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

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

import {mapGetters} from &#39;vuex&#39;

computed:{
   ...mapGetters([&#39;showNum&#39;])
}

ログイン後にコピー

要約

state

mutations
actions
getter
関連する推奨事項:「

」

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