這個問題是解決基于 vue 和 electron 的開發(fā)中使用 vuex 的 dispatch 無效的問題，即解決了 Please, don't use direct commit's, use dispatch instead of this. 問題。
先允許我梳理一下目錄結(jié)構(gòu)摹恰，以便閱讀的時候不會一頭霧水濒持，你到底說的這個文件是哪個……
其中 /src/main 是存放主配置文件的茉继，/src/render 下面有 store原杂、router挨决、components 等请祖。
components 下面就是很多 .vue 文件，router 下面就是一些路由配置的 js 文件和一些攔截器的 js脖祈。
關(guān)鍵是 store肆捕，store 下面有一個 index.js 的主配置文件 index.js，和一個 modules 文件夾盖高。
index.js 里面寫的是（記住這句話慎陵，后面會用到）：
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/ 下面存放各個實體，例如上圖中的 Auth.js 和 Counter.js喻奥，并通過 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
然后來看一個 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 對計數(shù)器加 1撞蚕。
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
如果是一般的 vue润梯，就 OK 了，但是甥厦，我遇到了報錯纺铭，說，Please, don't use direct commit's, use dispatch instead of this.
那好吧刀疙，沒事舶赔，不就是不然用 Commit，非要用 Dispatch 嘛谦秧，那我就寫一個 Action竟纳，里面直接調(diào)用 Mutation，就像這個樣子：
const actions = {
JUST_INCREASE ({ commit }) {
commit('INCREMENT_MAIN_COUNTER')
}
}
然而奇怪的事情是疚鲤，this.$store.dispatch('JUST_INCREASE') 并不能運行锥累，沒反應(yīng)，計數(shù)器還是 0集歇，不能賦值揩悄，就像是這個函數(shù)沒有被執(zhí)行一樣。沒有報錯鬼悠，沒有任何異常删性，查也查不出什么問題。
網(wǎng)上的資料似乎也挺少焕窝。
折騰了很久蹬挺，后來發(fā)現(xiàn)是 vuex-electron 里面一個插件的鍋。
解決方法有兩個它掂。
方法一：
在 store/index.js 里面巴帮，就是上文特別強調(diào)了的那個文件，去掉 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'
})
這是因為 vuex-electron 引入了一個用于多進程間共享 Vuex Store 的狀態(tài)的插件榕茧。如果沒有多進程交互的需求，完全可以不引入這個插件客给。
注釋掉以后重啟項目用押，用 this.$store.commit('XXX') 就可以使用了。
然而靶剑，如果需要多進程來處理怎么辦蜻拨？
方法二：
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 examplesrc/main.js):import './path/to/your/store'
這種時候就不能用第一種方法來解決問題了。
好在文檔也說了桩引，加上一行導入缎讼。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
之后一切正常坑匠，可以使用 Dispatch 來進行操作了血崭。
最后還有一個比較奇怪的問題：
在直接調(diào)用 state 的時候，這樣寫 this.$store.state.loginStatus 是不行的厘灼，會 undefined夹纫，必須寫成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 一樣手幢，似乎可以解釋為捷凄，不同的模塊不指定名字的話就找不到。
但是围来，在寫 Dispatch 的時候又不需要指定名字了跺涤，直接 dispatch('changeLoginStatus') 就行了，不然難道不應(yīng)該是也按照 dispatch('Auth/changeLoginStatus') 這樣子來寫嘛……
