Vuex での Mutation 変更ステータス操作の詳細な説明

前の記事は状態の読み取りについてでしたが、この記事は状態の変更についてです。それは、Mutation の操作方法です。

1. $store.commit( )

Vuex は、ステータスを変更するための commit メソッドを提供します

1.store.js ファイル

const mutations={
  add(state){
    state.count++
  },
  reduce(state){
    state.count--
  }
}

2. ボタンの変更方法

< ;button @click="$store.commit('reduce')">-

2. 値を渡す

状態を変更する最も簡単な操作 実際のプロジェクトでは、状態を変更するときに値を渡す必要があることがよくあります。たとえば、上記の例では毎回 1 を追加するだけですが、今度は渡された値を追加する必要があります。実際には、Mutations に別のパラメータを追加し、コミット時にそれを渡すだけです。具体的なコードを見てみましょう:

1.store.js

const mutations={
  add(state,n){
    state.count+=n
  },
  reduce(state){
    state.count--
  }
}

2. ボタンの commit() メソッドによって渡されるパラメータを変更します。10 を渡します。これは、それぞれ 10 ずつ加算することを意味します。 time.

-

3. Mutationsのテンプレート取得方法

実際の開発でも見てみたい $store.commit() のようなメソッドが現れたら、テンプレート内のメソッドと同じ方法で呼び出せるようにしたいと考えています。

例: @click="reduce" は、vuex プラグインを参照しないのと同じです。

1. import を使用して、mapMutation をテンプレート count.vue に導入します:

import { mapState,mapMutations } from 'vuex'

2テンプレートの