琅琊榜海宴小说,完结小说

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Vuex中Mutations修改狀態(tài)是什么

Vuex中Mutations修改狀態(tài)是什么？針對這個問題，這篇文章詳細(xì)介紹了相對應(yīng)的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計、成都做網(wǎng)站與策劃設(shè)計,普寧網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十載,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:普寧等地區(qū)。普寧做網(wǎng)站價格咨詢:13518219792

上篇是讀取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上的修改方法

二. 傳值

最簡單的修改狀態(tài)的操作，在實際項目中我們常常需要在修改狀態(tài)時傳值。比如上邊的例子，是我們每次只加1，而現(xiàn)在我們要通過所傳的值進(jìn)行相加。其實我們只需要在Mutations里再加上一個參數(shù)，并在commit的時候傳遞就就可以了。我們來看具體代碼：

1.store.js

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

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

三.模板獲取Mutations方法

實際開發(fā)中我們也不喜歡看到$store.commit( )這樣的方法出現(xiàn)，我們希望跟調(diào)用模板里的方法一樣調(diào)用。

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

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

import { mapState,mapMutations } from 'vuex'

2.在模板的

在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)
   }//通過這種方式，接收來自組件傳過來的新加入的學(xué)生
  },
  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就是要求接收的對象，也就是新加入的學(xué)生
  }

vuex接收組件傳參

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

需要注意的是，addstudent接收到的第二個參數(shù)是一個完整的對象，所以參數(shù)的使用略微有點不同

關(guān)于Vuex中Mutations修改狀態(tài)是什么問題的解答就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道了解更多相關(guān)知識。

網(wǎng)頁標(biāo)題：Vuex中Mutations修改狀態(tài)是什么
轉(zhuǎn)載源于：http://fisionsoft.com.cn/article/iiihse.html

新聞中心

其他資訊