Vue+Electron下Vuex的Dispatch沒有效果的解決方案

這個問題是解決基於 vue 和 electron 的開發中使用 vuex 的 dispatch 無效的問題，即解決了 Please, don't use direct commit's, use dispatch instead of this. 問題。
先容許我梳理一下目錄結構，以便閱讀的時候不會一頭霧水，你到底說的這個文件是哪一個……

其中 /src/main 是存放主配置文件的，/src/render 下面有 store、router、components 等。
components 下面就是不少 .vue 文件，router 下面就是一些路由配置的 js 文件和一些攔截器的 js。
關鍵是 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 的組件調用 INCREMENT_MAIN_COUNTER 對計數器加 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，裏面直接調用 Mutation，就像這個樣子：

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

然而奇怪的事情是，this.$store.dispatch('JUST_INCREASE') 並不能運行，沒反應，計數器仍是 0，不能賦值，就像是這個函數沒有被執行同樣。沒有報錯，沒有任何異常，查也查不出什麼問題。


網上的資料彷佛也挺少。
折騰了好久，後來發現是 vuex-electron 裏面一個插件的鍋。
解決方法有兩個。
方法一：
在 store/index.js 裏面，就是上文特別強調了的那個文件，去掉 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 的狀態的插件。若是沒有多進程交互的需求，徹底能夠不引入這個插件。
註釋掉之後重啓項目，用 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 example src/main.js):

import './path/to/your/store'

這種時候就不能用第一種方法來解決問題了。
好在文檔也說了，加上一行導入。
找到 /src/main/index.js，在前面加上一句：

import '../renderer/store'

以後一切正常，可使用 Dispatch 來進行操做了。

最後還有一個比較奇怪的問題：

在直接調用 state 的時候，這樣寫 this.$store.state.loginStatus 是不行的，會 undefined，必須寫成 this.$store.state.Auth.loginStatus，就像是 this.$store.state.Counter.main 同樣，彷佛能夠解釋爲，不一樣的模塊不指定名字的話就找不到。
可是，在寫 Dispatch 的時候又不須要指定名字了，直接 dispatch('changeLoginStatus') 就好了，否則難道不該該是也按照 dispatch('Auth/changeLoginStatus') 這樣子來寫嘛……

​