在Vuex中Mutations修改狀態(tài)操作
上篇是讀取state，這篇是修改狀態(tài)。即如何操作Mutations。
一. $store.commit( )
Vuex提供了commit方法來修改狀態(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>
二. 傳值
最簡單的修改狀態(tài)的操作，在實際項目中我們常常需要在修改狀態(tài)時傳值。比如上邊的例子，是我們每次只加1，而現(xiàn)在我們要通過所傳的值進行相加。其實我們只需要在Mutations里再加上一個參數(shù)，并在commit的時候傳遞就就可以了。我們來看具體代碼：
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方法
實際開發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)，我們希望跟調(diào)用模板里的方法一樣調(diào)用。
例如：@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參數(shù)傳遞
接下來做一個mutations的傳參講解
添加學生的例子
第一種傳參的方式
<template>
<div>
<h3>-------------------這是mutations傳參測試-------------------</h3>
<div>
{{this.$store.state.students}}//將已經(jīng)有的學生渲染在這兒
<div>
<button @click="addstu">點擊添加</button>//綁定添加事件
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
addstu () {
const newstu = {
id: 5,
name: '張國榮',
age: 44
}//定死一個要添加的學生，這就是要傳給mutations的參數(shù)
this.$store.commit('addStudent', newstu)
//調(diào)用commit方法，更新state的數(shù)據(jù)，
//第一個參數(shù)是mutations里面的方法名，
//第二個參數(shù)是傳給mutaitons里面addstudent方法的一個參數(shù)，
//也就是要新加入的學生
}
}
}
</script>
在vuex.store中接收這個參數(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中通過方法修改
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
})//原先是傳入兩個參數(shù)，現(xiàn)在直接傳入一個對象
//type就是需要調(diào)用的mutations里面的方法
//newstu就是要求接收的對象，也就是新加入的學生
}
vuex接收組件傳參
mutations: {
addStudent (state, playload) {
state.students.push(playload.newstu)
}
},
需要注意的是，addstudent接收到的第二個參數(shù)是一個完整的對象，所以參數(shù)的使用略微有點不同
以上這篇在Vuex中Mutations修改狀態(tài)操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 3 中使用 OpenLayers 實時顯示 zoom
本文介紹了如何在 Vue 3 中使用 OpenLayers 來獲取地圖的 zoom 值以及四角坐標信息,并實時更新數(shù)據(jù),這種方式可以用于 GIS 應(yīng)用開發(fā),幫助用戶更好地了解當前地圖范圍,感興趣的朋友一起看看吧2025-04-04
Vue.js實現(xiàn)表格動態(tài)增加刪除的方法（附源碼下載）
Vue.js通過簡潔的API提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)。在前端紛繁復雜的生態(tài)中，Vue.js有幸受到一定程度的關(guān)注，下面這篇文章主要給介紹了Vue.js實現(xiàn)表格動態(tài)增加刪除的方法實例，文末提供了源碼下載，需要的朋友可以參考借鑒。2017-01-01
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)購物車小功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
關(guān)于Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法
本文主要介紹了Vue不能監(jiān)聽(watch)數(shù)組變化的解決方法，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家介紹了vue.js前端網(wǎng)頁彈框異步的行為示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助祝大家多多進步，早日升職加薪2021-11-11
隨著人工智能的發(fā)展，圖像識別和人臉識別技術(shù)已經(jīng)被廣泛應(yīng)用于各種應(yīng)用程序中，Vue為我們提供了許多實用工具和庫，可以幫助我們在應(yīng)用程序中進行圖像識別和人臉識別，在本文中，我們將介紹如何使用Vue進行圖像識別和人臉對比,需要的朋友可以參考下2023-06-06
在使用Vue.js進行前端開發(fā)的過程中,Element?UI?是一個非常流行的UI庫,它提供了一套完整的組件來快速搭建美觀的用戶界面,但是我們經(jīng)常遇到一個問題使用Element?UI提供的el-date-picker組件時,嘗試自定義其樣式卻無法生效,所以本文給大家介紹如何解決這個問題2024-10-10
這篇文章主要介紹了使用Vue制作圖片輪播組件思路詳解,需要的朋友可以參考下2018-03-03
element ui 表格動態(tài)列顯示空白bug 修復方法
今天小編就為大家分享一篇element ui 表格動態(tài)列顯示空白bug 修復方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了如何解決公共組件父子組件依賴調(diào)用和子組件校驗父組件條件的問題，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10