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

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

1. $store.commit( )

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

1.store.js ファイル

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

2. ボタンの変更方法

c67d3721361f0a8a6e7a166899629ab1 65281c5ac262bf6d81768915a4a77ac0

a15af9f2d527d5856289fa026888437c-65281c5ac262bf6d81768915a4a77ac0

2. 値を渡す

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

1.store.js

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

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

384d8440f9a82d30fe2cd222bd88d276 65281c5ac262bf6d81768915a4a77ac0

18705af931ca08a15b3d96ea9d4b6c2b-65281c5ac262bf6d81768915a4a77ac0

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

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

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

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

import { mapState,mapMutations } from 'vuex'

2テンプレートの 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグにメソッド属性を追加し、mapMutations

 methods:mapMutations([
    'add','reduce'
]),

3 を追加します。テンプレート

5bd827e311e5c718d2aa9a05ec6c0284-65281c5ac262bf6d81768915a4a77ac0

注: $store.commit

  reduce: function () {
   this.$store.commit('add', 10) // html标签是可以不写this
  }

#補足知識:vuex ミューテーション パラメーターの受け渡し

次のステップでは、ミューテーションのパラメーター受け渡しについて説明します

学生の例を追加

最初のタイプパラメータを渡す方法

<template>
 <p>
 <h3>-------------------这是mutations传参测试-------------------</h3>
 <p>
  {{this.$store.state.students}}//将已经有的学生渲染在这儿
  <p>
  <button @click="addstu">点击添加</button>//绑定添加事件
  </p>
 </p>
 </p>
</template>

<script>
export default {
 methods: {
  addstu () {
   const newstu = {
   id: 5,
   name: &#39;张国荣&#39;,
   age: 44
   }//定死一个要添加的学生，这就是要传给mutations的参数
   this.$store.commit(&#39;addStudent&#39;, newstu)
   //调用commit方法，更新state的数据，
   //第一个参数是mutations里面的方法名，
   //第二个参数是传给mutaitons里面addstudent方法的一个参数，
   //也就是要新加入的学生
  }
 }
}
</script>

このパラメータを vuex.store で受け取る

const store = new Vuex.Store({
// 定义的公共变量
  state: {
   count: 1,
   students: [
    {
     id: 1,
     name: 'dx',
     age: 18
    },
    {
     id: 2,
     name: 'yx',
     age: 18
    },
    {
     id: 3,
     name: 'ym',
     age: 32
    },
    {
     id: 4,
     name: '刘亦菲',
     age: 30
    }
   ]
  },
 // state中的变量只能在mutations中通过方法修改
  mutations: {
   changeCount: function (state) {
   state.count++
   console.log('改变了count')
   },
   addStudent (state, stu) {
   state.students.push(stu)
   }//通过这种方式，接收来自组件传过来的新加入的学生
  },
  actions: {
  },
  getters: {
  }
})

パラメータを渡す 2 番目の方法

コンポーネントは、パラメータを vuex に渡す パラメータを渡す

addstu () {
   const newstu = {
   id: 5,
   name: '张国荣',
   age: 44
   }
   this.$store.commit({
   type: 'addStudent',
   newstu: newstu
   })//原先是传入两个参数，现在直接传入一个对象
   //type就是需要调用的mutations里面的方法
   //newstu就是要求接收的对象，也就是新加入的学生
  }

vuex はパラメータを渡すコンポーネントを受け取ります

mutations: {
   addStudent (state, playload) {
   state.students.push(playload.newstu)
   }
  },

addstudent によって受け取られる 2 番目のパラメータは完全なオブジェクトであるため、パラメータの使用方法が若干異なることに注意してください

関連する学習に関する推奨事項:

JavaScript ビデオ チュートリアル

以上がVuex での Mutation 変更ステータス操作の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。