這個問題是解決基於 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 examplesrc/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')
這樣子來寫嘛……