在Vuex中Mutations修改狀態(tài)操作
上篇是讀取state，這篇是修改狀態(tài)。即如何操作Mutations。
一. $store.commit( )
Vuex提供了commit方法來(lái)修改狀態(tài)
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>
二. 傳值
最簡(jiǎn)單的修改狀態(tài)的操作，在實(shí)際項(xiàng)目中我們常常需要在修改狀態(tài)時(shí)傳值。比如上邊的例子，是我們每次只加1，而現(xiàn)在我們要通過(guò)所傳的值進(jìn)行相加。其實(shí)我們只需要在Mutations里再加上一個(gè)參數(shù)，并在commit的時(shí)候傳遞就就可以了。我們來(lái)看具體代碼：
1.store.js
const mutations={
add(state,n){
state.count+=n
},
reduce(state){
state.count--
}
}
2.修改按鈕的commit( )方法傳遞的參數(shù)，我們傳遞10，意思就是每次加10.
<button @click="$store.commit('add',10)">+</button>
<button @click="$store.commit('reduce')">-</button>
三.模板獲取Mutations方法
實(shí)際開(kāi)發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)，我們希望跟調(diào)用模板里的方法一樣調(diào)用。
例如：@click=”reduce” 就和沒(méi)引用vuex插件一樣。
1.在模板count.vue里用import 引入我們的mapMutations：
import { mapState,mapMutations } from 'vuex'
2.在模板的<script>標(biāo)簽里添加methods屬性，并加入mapMutations
methods:mapMutations([
'add','reduce'
]),
3.在模板中直接使用我們的reduce或者add方法
<button @click="reduce">-</button>
注意：封裝起來(lái)$store.commit
reduce: function () {
this.$store.commit('add', 10) // html標(biāo)簽是可以不寫(xiě)this
}
補(bǔ)充知識(shí)：vuex mutations參數(shù)傳遞
接下來(lái)做一個(gè)mutations的傳參講解
添加學(xué)生的例子
第一種傳參的方式
<template>
<div>
<h3>-------------------這是mutations傳參測(cè)試-------------------</h3>
<div>
{{this.$store.state.students}}//將已經(jīng)有的學(xué)生渲染在這兒
<div>
<button @click="addstu">點(diǎn)擊添加</button>//綁定添加事件
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
addstu () {
const newstu = {
id: 5,
name: '張國(guó)榮',
age: 44
}//定死一個(gè)要添加的學(xué)生，這就是要傳給mutations的參數(shù)
this.$store.commit('addStudent', newstu)
//調(diào)用commit方法，更新state的數(shù)據(jù)，
//第一個(gè)參數(shù)是mutations里面的方法名，
//第二個(gè)參數(shù)是傳給mutaitons里面addstudent方法的一個(gè)參數(shù)，
//也就是要新加入的學(xué)生
}
}
}
</script>
在vuex.store中接收這個(gè)參數(shù)
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中通過(guò)方法修改
mutations: {
changeCount: function (state) {
state.count++
console.log('改變了count')
},
addStudent (state, stu) {
state.students.push(stu)
}//通過(guò)這種方式，接收來(lái)自組件傳過(guò)來(lái)的新加入的學(xué)生
},
actions: {
},
getters: {
}
})
第二種傳參的方式
組件向vuex傳參
addstu () {
const newstu = {
id: 5,
name: '張國(guó)榮',
age: 44
}
this.$store.commit({
type: 'addStudent',
newstu: newstu
})//原先是傳入兩個(gè)參數(shù)，現(xiàn)在直接傳入一個(gè)對(duì)象
//type就是需要調(diào)用的mutations里面的方法
//newstu就是要求接收的對(duì)象，也就是新加入的學(xué)生
}
vuex接收組件傳參
mutations: {
addStudent (state, playload) {
state.students.push(playload.newstu)
}
},
需要注意的是，addstudent接收到的第二個(gè)參數(shù)是一個(gè)完整的對(duì)象，所以參數(shù)的使用略微有點(diǎn)不同
以上這篇在Vuex中Mutations修改狀態(tài)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決
這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無(wú)法雙向綁定的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue利用Mixin輕松實(shí)現(xiàn)代碼復(fù)用
Mixin，中文翻譯為"混入"，在Vue中是一種非常有用的功能，可以解決許多開(kāi)發(fā)中的常見(jiàn)問(wèn)題,下面就讓我們一起深入了解一下Mixin在Vue中解決了哪些問(wèn)題吧2023-06-06
vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值
這篇文章主要介紹了vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-08-08
淺談webpack編譯vue項(xiàng)目生成的代碼探索
本篇文章主要介紹了淺談webpack編譯vue項(xiàng)目生成的代碼探索，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
在我們?nèi)粘ｉ_(kāi)發(fā)中,有些組件里面加載非常慢,導(dǎo)致我們路由跳轉(zhuǎn)的時(shí)候回出現(xiàn)卡頓情況,這篇文章主要介紹了Vue3:?Suspense異步加載組件,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了關(guān)于Vue單元測(cè)試的幾個(gè)坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹(shù)狀表格效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇Vue循環(huán)組件加validate多表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了Vue 中如何正確引入第三方模塊的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05