上篇是讀取state，這篇是修改狀態。即如何操作Mutations。

一. $store.commit( )

Vuex提供了commit方法來修改狀態

1.store.js檔案

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

2.在button上的修改方法

<button @click="$store.commit('add')">+</button>

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

二. 傳值

最簡單的修改狀態的操作，在實際專案中我們常常需要在修改狀態時傳值。比如上邊的例子，是我們每次只加1，而現在我們要通過所傳的值進行相加。其實我們只需要在Mutations裡再加上一個引數，並在commit的時候傳遞就就可以了。我們來看具體程式碼：

1.store.js

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

2.修改按鈕的commit( )方法傳遞的引數，我們傳遞10，意思就是每次加10.

<button @click="$store.commit('add',10)">+</button>

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

三.模板獲取Mutations方法

實際開發中我們也不喜歡看到$store.commit( )這樣的方法出現，我們希望跟呼叫模板裡的方法一樣呼叫。

例如：@click=”reduce” 就和沒引用vuex外掛一樣。

1.在模板count.vue裡用import 引入我們的mapMutations：

import { mapState,mapMutations } from 'vuex'

2.在模板的<script>標籤裡新增methods屬性，並加入mapMutations

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

3.在模板中直接使用我們的reduce或者add方法

<button @click="reduce">-</button>

注意：封裝起來$store.commit

  reduce: function () {
   this.$store.commit('add',10) // html標籤是可以不寫this
  }
 

補充知識：vuex mutations引數傳遞

接下來做一個mutations的傳參講解

新增學生的例子

第一種傳參的方式

<template>
 <div>
 <h3>-------------------這是mutations傳參測試-------------------</h3>
 <div>
  {{this.$store.state.students}}//將已經有的學生渲染在這兒
  <div>
  <button @click="addstu">點選新增</button>//繫結新增事件
  </div>
 </div>
 </div>
</template>

<script>
export default {
 methods: {
  addstu () {
   const newstu = {
   id: 5,name: '張國榮',age: 44
   }//定死一個要新增的學生，這就是要傳給mutations的引數
   this.$store.commit('addStudent',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',{
     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: {
  }
})

第二種傳參的方式

元件向vuex傳參

addstu () {
   const newstu = {
   id: 5,age: 44
   }
   this.$store.commit({
   type: 'addStudent',newstu: newstu
   })//原先是傳入兩個引數，現在直接傳入一個物件
   //type就是需要呼叫的mutations裡面的方法
   //newstu就是要求接收的物件，也就是新加入的學生
  }

vuex接收元件傳參

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

需要注意的是，addstudent接收到的第二個引數是一個完整的物件，所以引數的使用略微有點不同

以上這篇在Vuex中Mutations修改狀態操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。