解决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不是搞事情吗,不好使还让我使,是你抽了还是我抽了。

store/index.js

store/modules/index.js

网上搜索一大堆的东西,基本很少有有用的信息,最后偶然发现竟然是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)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 手动挂载Vue3.0组件到DOM节点的方法

    手动挂载Vue3.0组件到DOM节点的方法

    在VUE应用中,经常会使用一些非vue实现的js库,这些js库可能要求外部传入一些界面DOM节点,本文主要介绍了手动挂载Vue3.0组件到DOM节点的方法,感兴趣的可以了解一下
    2024-08-08
  • Vue vant使用ImagePreview实现预览图片

    Vue vant使用ImagePreview实现预览图片

    这篇文章主要介绍了Vue vant使用ImagePreview实现预览图片,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • Vue模拟数据,实现路由进入商品详情页面的示例

    Vue模拟数据,实现路由进入商品详情页面的示例

    今天小编就为大家分享一篇Vue模拟数据,实现路由进入商品详情页面的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue获取或者改变vuex中的值方式

    vue获取或者改变vuex中的值方式

    这篇文章主要介绍了vue获取或者改变vuex中的值方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue2.0权限树组件实现代码

    Vue2.0权限树组件实现代码

    本文通过实例代码给大家介绍了Vue2.0权限树组件实现代码,需要的的朋友参考下吧
    2017-08-08
  • vue项目中如何调用多个不同的ip接口

    vue项目中如何调用多个不同的ip接口

    这篇文章主要介绍了vue项目中如何调用多个不同的ip接口,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue使用vue-area-linkage实现地址三级联动效果的示例

    Vue使用vue-area-linkage实现地址三级联动效果的示例

    很多时候我们需要使用地址三级联动,即省市区三级联动,这篇文章主要介绍了Vue使用vue-area-linkage实现地址三级联动效果的示例,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • vue el-table实现多选框回填的示例代码

    vue el-table实现多选框回填的示例代码

    摘要:Vue多选框回填是实现表单数据高效处理的常见需求,本文主要介绍了vue el-table实现多选框回填的示例代码,具有一定的参考价值,感兴趣的可以了解一下
    2024-01-01
  • Vue项目中使用Base64

    Vue项目中使用Base64

    在vue项目中有时会使用到Base6464转码,现将自己使用的一种方法记录下来,对vue使用Base64相关知识感兴趣的朋友一起看看吧
    2024-02-02
  • vite+vue3+element-plus项目搭建的方法步骤

    vite+vue3+element-plus项目搭建的方法步骤

    因为vue3出了一段时间了,element也出了基于vue3.x版本的element-plus,vite打包听说很快,尝试一下,感兴趣的可以了解一下
    2021-06-06

最新评论