Detailed explanation of Mutations modification status operation in Vuex

The previous article was about reading state, and this article is about modifying state. That is, how to operate Mutations.

1. $store.commit( )

Vuex provides the commit method to modify the status

1.store.js file

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

2. Modification method on button

c67d3721361f0a8a6e7a166899629ab1 65281c5ac262bf6d81768915a4a77ac0

077cb48f3558240155e427fd364a6d6d-65281c5ac262bf6d81768915a4a77ac0

2. Pass value

The simplest operation to modify the state. In actual projects, we often need to pass values ​​when modifying the state. For example, in the above example, we only add 1 each time, but now we need to add the values ​​passed. In fact, we only need to add another parameter to Mutations and pass it when committing. Let’s look at the specific code:

1.store.js

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

2. Modify the parameters passed by the commit() method of the button. We pass 10, which means adding 10 each time.

384d8440f9a82d30fe2cd222bd88d276 65281c5ac262bf6d81768915a4a77ac0

48b796c00fd825c0435e7a9bbf5bee52-65281c5ac262bf6d81768915a4a77ac0

3. Template acquisition method of Mutations

We don’t like to see it in actual development either When a method like $store.commit() appears, we hope to call it the same way as the method in the template.

For example: @click="reduce" is the same as not referencing the vuex plug-in.

1. Use import to introduce our mapMutations in the template count.vue:

import { mapState,mapMutations } from 'vuex'

2 .Add the methods attribute in the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag of the template, and add mapMutations

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

3. Use our reduce or add method directly in the template

5905a09bb16002d421dcfe0a182bff33-65281c5ac262bf6d81768915a4a77ac0

Note: Encapsulate $store.commit

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

Supplementary knowledge:vuex mutations parameter passing

The next step is to explain the parameter passing of mutations

Add student examples

The first type of passing Parameter method

<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>

Receive this parameter in 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: {
  }
})

The second method of passing parameters

The component passes the parameter to vuex Passing parameters

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

vuex receives component passing parameters

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

It should be noted that the second parameter received by addstudent is a complete object, so the use of parameters is slightly different

Related learning recommendations: javascript video tutorial

The above is the detailed content of Detailed explanation of Mutations modification status operation in Vuex. For more information, please follow other related articles on the PHP Chinese website!