這個(gè)問(wèn)題是解決基于 vue 和 electron 的開(kāi)發(fā)中使用 vuex 的 dispatch 無(wú)效的問(wèn)題，即解決了 Please, don't use direct commit's, use dispatch instead of this. 問(wèn)題。

先允許我梳理一下目錄結(jié)構(gòu)，以便閱讀的時(shí)候不會(huì)一頭霧水，你到底說(shuō)的這個(gè)文件是哪個(gè)……

其中 /src/main 是存放主配置文件的，/src/render 下面有 store、router、components 等。

components 下面就是很多 .vue 文件，router 下面就是一些路由配置的 js 文件和一些攔截器的 js。

關(guān)鍵是 store，store 下面有一個(gè) index.js 的主配置文件 index.js，和一個(gè) modules 文件夾。

index.js 里面寫的是（記住這句話，后面會(huì)用到）：

import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
 modules,
 plugins: [
 createPersistedState(),
 createSharedMutations()
 ],
 strict: process.env.NODE_ENV !== 'production'
})

而 modules/ 下面存放各個(gè)實(shí)體，例如上圖中的 Auth.js 和 Counter.js，并通過(guò) index.js 全部引入。

/**
 * The file enables `@/store/index.js` to import all vuex modules
 * in a one-shot manner. There should not be any reason to edit this file.
 */
const files = require.context('.', false, /\.js$/)
const modules = {}
files.keys().forEach(key => {
 if (key === './index.js') return
 modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})
export default modules

然后來(lái)看一個(gè) vuex 的官方樣例：

const state = {
 main: 0
}
const mutations = {
 DECREMENT_MAIN_COUNTER (state) {
 state.main--
 },
 INCREMENT_MAIN_COUNTER (state) {
 state.main++
 }
}
const actions = {
 someAsyncTask ({ commit }) {
 // do something async
 commit('INCREMENT_MAIN_COUNTER')
 }
}
export default {
 state,
 mutations,
 actions
}

之后很顯然的，我想要在 Vue 的組件調(diào)用 INCREMENT_MAIN_COUNTER 對(duì)計(jì)數(shù)器加 1。

this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);

如果是一般的 vue，就 OK 了，但是，我遇到了報(bào)錯(cuò)，說(shuō)，Please, don't use direct commit's, use dispatch instead of this.

那好吧，沒(méi)事，不就是不然用 Commit，非要用 Dispatch 嘛，那我就寫一個(gè) Action，里面直接調(diào)用 Mutation，就像這個(gè)樣子：

const actions = {
 JUST_INCREASE ({ commit }) {
 commit('INCREMENT_MAIN_COUNTER')
 }
}

然而奇怪的事情是，this.$store.dispatch('JUST_INCREASE') 并不能運(yùn)行，沒(méi)反應(yīng)，計(jì)數(shù)器還是 0，不能賦值，就像是這個(gè)函數(shù)沒(méi)有被執(zhí)行一樣。沒(méi)有報(bào)錯(cuò)，沒(méi)有任何異常，查也查不出什么問(wèn)題。

網(wǎng)上的資料似乎也挺少。

折騰了很久，后來(lái)發(fā)現(xiàn)是 vuex-electron 里面一個(gè)插件的鍋。

解決方法有兩個(gè)。

方法一：

在 store/index.js 里面，就是上文特別強(qiáng)調(diào)了的那個(gè)文件，去掉 createSharedMutations 插件。

import Vue from 'vue'
import Vuex from 'vuex'
import { createPersistedState, createSharedMutations } from 'vuex-electron'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
 modules,
 plugins: [
 createPersistedState(),
 createSharedMutations() // 注釋掉這一行
 ],
 strict: process.env.NODE_ENV !== 'production'
})

這是因?yàn)?vuex-electron 引入了一個(gè)用于多進(jìn)程間共享 Vuex Store 的狀態(tài)的插件。如果沒(méi)有多進(jìn)程交互的需求，完全可以不引入這個(gè)插件。

注釋掉以后重啟項(xiàng)目，用 this.$store.commit('XXX') 就可以使用了。
然而，如果需要多進(jìn)程來(lái)處理怎么辦？

方法二：

https://github.com/vue-electron/vuex-electron#installation

看第 3 條：

In case if you enabled createSharedMutations() plugin you need to create an instance of store in the main process. To do it just add this line into your main process (for example src/main.js):
  import './path/to/your/store'

這種時(shí)候就不能用第一種方法來(lái)解決問(wèn)題了。
好在文檔也說(shuō)了，加上一行導(dǎo)入。
找到 /src/main/index.js，在前面加上一句：

import '../renderer/store'

之后一切正常，可以使用 Dispatch 來(lái)進(jìn)行操作了。

最后還有一個(gè)比較奇怪的問(wèn)題：

在直接調(diào)用 state 的時(shí)候，這樣寫 this.$store.state.loginStatus 是不行的，會(huì) undefined，必須寫成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 一樣，似乎可以解釋為，不同的模塊不指定名字的話就找不到。

但是，在寫 Dispatch 的時(shí)候又不需要指定名字了，直接 dispatch('changeLoginStatus') 就行了，不然難道不應(yīng)該是也按照 dispatch('Auth/changeLoginStatus') 這樣子來(lái)寫嘛……

總結(jié)

以上所述是小編給大家介紹的解決Vue+Electron下Vuex的Dispatch沒(méi)有效果問(wèn)題,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論