解決Electron?store的commit和dispatch不好用問題
Vue 的Vuex 一般vue的commit和dispatch可以直接使用，然后到了桌面程序的Vuex（store）竟然不好使了，原因真是奇葩無比。
一、Electron使用store的commit和dispatch問題
this.$store.dispatch('project/setProject', item)
// this.$store.dispatch('project/setProject')
//this.$store.dispatch('project/setProject').then(() => {
// //------
//})
如果直接使用dispatch發(fā)現(xiàn)，緩存并未更新，感覺就像是方法沒有執(zhí)行，因?yàn)闆]有任何錯(cuò)誤提示，這如何找問題！
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
然后我們換commit的時(shí)候又報(bào)如下錯(cuò)誤，只能使用dispatch，這sb不是搞事情嗎，不好使還讓我使，是你抽了還是我抽了。
網(wǎng)上搜索一大堆的東西，基本很少有有用的信息，最后偶然發(fā)現(xiàn)竟然是vuex-electron插件的一個(gè)坑?。?！
這坑埋的挺深?。?！
二、解決方法有兩個(gè)
方法1
在 store/index.js 里面，就是上文特別強(qiáng)調(diào)了的那個(gè)文件，去掉或注釋 createSharedMutations 插件
因?yàn)?vuex-electron 引入了一個(gè)用于多進(jìn)程間共享 Vuex Store 的狀態(tài)的插件。
如果沒有多進(jìn)程交互的需求，完全可以不引入這個(gè)插件。
注釋掉以后重啟項(xiàng)目，用 this.$store.commit('XXX') 就可以使用了
方法2
如果需要多進(jìn)程來處理怎么辦？
看第 3 條
這樣就不能使用第一種方法來解決問題了。好在文檔也說了，加上一行導(dǎo)入。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
重啟之后一切正常，可以使用 Dispatch 來進(jìn)行操作了！
使用方法
// 存 兩者使用有區(qū)別，注意區(qū)分
this.$store.dispatch('project/setProject', item) // 調(diào)用actions方法
this.$store.commit('project/SET_PROJECT', item) // 調(diào)用mutations方法
// 取 第一個(gè)project是js文件的名字，第二個(gè)是state設(shè)置的屬性key，如此才能獲取到值
console.log(this.$store.state.project.project)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法
在VUE應(yīng)用中,經(jīng)常會(huì)使用一些非vue實(shí)現(xiàn)的js庫,這些js庫可能要求外部傳入一些界面DOM節(jié)點(diǎn),本文主要介紹了手動(dòng)掛載Vue3.0組件到DOM節(jié)點(diǎn)的方法,感興趣的可以了解一下2024-08-08
Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片
這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁面的示例
今天小編就為大家分享一篇Vue模擬數(shù)據(jù),實(shí)現(xiàn)路由進(jìn)入商品詳情頁面的示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了vue獲取或者改變vuex中的值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue2.0權(quán)限樹組件實(shí)現(xiàn)代碼
本文通過實(shí)例代碼給大家介紹了Vue2.0權(quán)限樹組件實(shí)現(xiàn)代碼，需要的的朋友參考下吧2017-08-08
vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口
這篇文章主要介紹了vue項(xiàng)目中如何調(diào)用多個(gè)不同的ip接口，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例
很多時(shí)候我們需要使用地址三級(jí)聯(lián)動(dòng)，即省市區(qū)三級(jí)聯(lián)動(dòng)，這篇文章主要介紹了Vue使用vue-area-linkage實(shí)現(xiàn)地址三級(jí)聯(lián)動(dòng)效果的示例，感興趣的小伙伴們可以參考一下2018-06-06
vue el-table實(shí)現(xiàn)多選框回填的示例代碼
摘要：Vue多選框回填是實(shí)現(xiàn)表單數(shù)據(jù)高效處理的常見需求,本文主要介紹了vue el-table實(shí)現(xiàn)多選框回填的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
在vue項(xiàng)目中有時(shí)會(huì)使用到Base6464轉(zhuǎn)碼,現(xiàn)將自己使用的一種方法記錄下來,對(duì)vue使用Base64相關(guān)知識(shí)感興趣的朋友一起看看吧2024-02-02
vite+vue3+element-plus項(xiàng)目搭建的方法步驟
因?yàn)関ue3出了一段時(shí)間了，element也出了基于vue3.x版本的element-plus，vite打包聽說很快，嘗試一下，感興趣的可以了解一下2021-06-06