解决Electron store的commit和dispatch不好用问题
更新时间：2023年01月10日 11:43:25 作者：梦和远方
这篇文章主要介绍了解决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发现，缓存并未更新，感觉就像是方法没有执行，因为没有任何错误提示，这如何找问题！
this.$store.commit('INCREMENT_MAIN_COUNTER');
// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);
然后我们换commit的时候又报如下错误，只能使用dispatch，这sb不是搞事情吗，不好使还让我使，是你抽了还是我抽了。
网上搜索一大堆的东西，基本很少有有用的信息，最后偶然发现竟然是vuex-electron插件的一个坑！！！
这坑埋的挺深！！！
二、解决方法有两个
方法1
在 store/index.js 里面，就是上文特别强调了的那个文件，去掉或注释 createSharedMutations 插件
因为 vuex-electron 引入了一个用于多进程间共享 Vuex Store 的状态的插件。
如果没有多进程交互的需求，完全可以不引入这个插件。
注释掉以后重启项目，用 this.$store.commit('XXX') 就可以使用了
方法2
如果需要多进程来处理怎么办？
看第 3 条
这样就不能使用第一种方法来解决问题了。好在文档也说了，加上一行导入。
找到 /src/main/index.js，在前面加上一句：
import '../renderer/store'
重启之后一切正常，可以使用 Dispatch 来进行操作了！
使用方法
// 存 两者使用有区别，注意区分
this.$store.dispatch('project/setProject', item) // 调用actions方法
this.$store.commit('project/SET_PROJECT', item) // 调用mutations方法
// 取 第一个project是js文件的名字，第二个是state设置的属性key，如此才能获取到值
console.log(this.$store.state.project.project)
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
element-ui vue input输入框自动获取焦点聚焦方式
这篇文章主要介绍了element-ui vue input输入框自动获取焦点聚焦方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
Vue3视频播放器组件Vue3-video-play新手入门教程
这篇文章主要给大家介绍了关于Vue3视频播放器组件Vue3-video-play新手入门教程的相关资料,本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,需要的朋友可以参考下2023-12-12
这篇文章主要介绍了通过图带你深入了解vue的响应式原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，2019-06-06
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
今天小编就为大家分享一篇Vue 实现CLI 3.0 + momentjs + lodash打包时优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vuex在vite&vue3中的简单使用说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
这篇文章主要为大家详细介绍了vue+echarts实现数据实时更新，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
本文通过实例代码给大家介绍了vue 莹石摄像头直播视频功能，文章还给大家提到了vue h5项目调用手机摄像头录像并上传的功能，需要的朋友可以参考下2018-08-08
这篇文章主要介绍了Vue.js 关于页面加载完成后执行一个方法的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了vue项目中仿element-ui弹框效果的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
在一些页面设置进度条效果给人一种很好的体验效果，今天小编教大家vue圆环百分比进度条组件功能的实现代码，代码超级简单啊，感兴趣的朋友快来看下吧2021-05-05
最新评论