vuex怎么在非組件中調用mutations方法

這篇文章主要講解了“vuex怎么在非組件中調用mutations方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“vuex怎么在非組件中調用mutations方法”吧！

在非組件中調用mutations方法

一般情況下調用 mutations.js 中的方法都是在組件中，如果想在非組件中調用，則需要使用如下方式

在組件中調用

import {mapMutations} from 'vuex'
import {SET_IS_LOGIN} from 'store/mutation-types'
export default {
    methods: {
        ...mapMutations({
            set_is_login: SET_IS_LOGIN
        }),
        init() {
            this.set_is_login(true)
        }
    }
}

在非組件中調用

import store from 'store'
import {SET_IS_LOGIN} from 'store/mutation-types'
function init() {
    store.commit(SET_IS_LOGIN, true)
}

vuex的mutations屬性

mutations屬性介紹

是唯一一種方式來修改state中的狀態的；在組件的自定義方法中，使用this.$store.commit(‘對應mutations中的方法’, 新的值)方法，把新的值提交給mutations中相對應的方法，mutations屬性中的每個方法中有兩個參數，分比為state和payload；state其實就是vuex中的state屬性，payload叫做mutations的載荷，其實就是傳過來的值。一般payload傳的是一個對象，這樣可以包含多個字段并且記錄的 mutation 會更易讀：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

store.commit('increment', {
  amount: 10
})

對象風格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的對象：

store.commit({
  type: 'increment',
  amount: 10
})

當使用對象風格的提交方式，整個對象都作為載荷傳給 mutation 函數，因此 handler 保持不變：

mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

使用常量替代 Mutation 事件類型

使用常量替代 mutation 事件類型在各種 Flux 實現中是很常見的模式。這樣可以使 linter 之類的工具發揮作用，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風格的計算屬性命名功能來使用一個常量作為函數名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

用不用常量取決于你——在需要多人協作的大型項目中，這會很有幫助。但如果你不喜歡，你完全可以不這樣做。

Mutation 必須是同步函數

一條重要的原則就是要記住 mutation 必須是同步函數。為什么？請參考下面的例子：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

現在想象，我們正在 debug 一個 app 并且觀察 devtool 中的 mutation 日志。每一條 mutation 被記錄，devtools 都需要捕捉到前一狀態和后一狀態的快照。然而，在上面的例子中 mutation 中的異步函數中的回調讓這不可能完成：因為當 mutation 觸發的時候，回調函數還沒有被調用，devtools 不知道什么時候回調函數實際上被調用——實質上任何在回調函數中進行的狀態的改變都是不可追蹤的。

在組件中提交 Mutation

你可以在組件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）。

import { mapMutations } from 'vuex'
export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

感謝各位的閱讀，以上就是“vuex怎么在非組件中調用mutations方法”的內容了，經過本文的學習后，相信大家對vuex怎么在非組件中調用mutations方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！