在Vuex中Mutations修改狀態操作下詳解-js教程-PHP中文網

在Vuex中Mutations修改狀態操作下詳解

coldplay.xixi

發布： 2020-07-29 17:25:52

轉載

2457 人瀏覽過

在Vuex中Mutations修改狀態操作下詳解

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

一. $store.commit( )

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

1.store.js檔案

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

登入後複製

2.在button上的修改方法

#

二. 傳值

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

1.store.js

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

登入後複製

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

#三.模板取得Mutations方法

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

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

1.在範本count.vue裡用import 引入我們的mapMutations：

import { mapState,mapMutations } from 'vuex'

#2 .在模板的

作者最新文章