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',
  	      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: {
  	}
})
           

第二種傳參的方式

元件向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接收到的第二個參數是一個完整的對象，是以參數的使用略微有點不同