解决Vue+Electron下Vuex的Dispatch没有效果问题


Posted in Javascript onMay 20, 2019

这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题。

先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个……

解决Vue+Electron下Vuex的Dispatch没有效果问题

其中 /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.

解决Vue+Electron下Vuex的Dispatch没有效果问题

那好吧,没事,不就是不然用 Commit,非要用 Dispatch 嘛,那我就写一个 Action,里面直接调用 Mutation,就像这个样子:

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

然而奇怪的事情是,this.$store.dispatch('JUST_INCREASE') 并不能运行,没反应,计数器还是 0,不能赋值,就像是这个函数没有被执行一样。没有报错,没有任何异常,查也查不出什么问题。

解决Vue+Electron下Vuex的Dispatch没有效果问题

解决Vue+Electron下Vuex的Dispatch没有效果问题

网上的资料似乎也挺少。

折腾了很久,后来发现是 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'

解决Vue+Electron下Vuex的Dispatch没有效果问题

之后一切正常,可以使用 Dispatch 来进行操作了。

解决Vue+Electron下Vuex的Dispatch没有效果问题

最后还有一个比较奇怪的问题:

解决Vue+Electron下Vuex的Dispatch没有效果问题

在直接调用 state 的时候,这样写 this.$store.state.loginStatus 是不行的,会 undefined,必须写成 this.$store.state.Auth.loginStatus,就像是 this.$store.state.Counter.main 一样,似乎可以解释为,不同的模块不指定名字的话就找不到。

但是,在写 Dispatch 的时候又不需要指定名字了,直接 dispatch('changeLoginStatus') 就行了,不然难道不应该是也按照 dispatch('Auth/changeLoginStatus') 这样子来写嘛……

总结

以上所述是小编给大家介绍的解决Vue+Electron下Vuex的Dispatch没有效果问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
Ajax使用原生态JS验证用户名是否存在
May 26 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 Javascript
浅谈node的事件机制
Oct 09 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
详解JavaScript 的变量
Mar 08 Javascript
js键盘事件实现人物的行走
Jan 17 Javascript
js实现抽奖的两种方法
Mar 19 Javascript
jQuery插件实现图片轮播效果
Oct 19 jQuery
微信小程序上传文件到阿里OSS教程
May 20 #Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 #Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 #Javascript
React如何实现浏览器打印部分内容详析
May 19 #Javascript
koa-router路由参数和前端路由的结合详解
May 19 #Javascript
Vue.js中该如何自己维护路由跳转记录
May 19 #Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
You might like
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP图像处理类库MagickWand用法实例分析
2015/05/21 PHP
php微信公众号开发(3)php实现简单微信文本通讯
2016/12/15 PHP
phpStudy配置多站点多域名方法及遇到的403错误解决方法
2017/10/19 PHP
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
用Vue-cli搭建的项目中引入css报错的原因分析
2017/07/20 Javascript
Nuxt.js实战详解
2018/01/18 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
浅析JS中回调函数及用法
2018/07/25 Javascript
浅谈微信小程序之官方UI框架we-ui使用教程
2018/08/20 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
Bootstrap 按钮样式与使用代码详解
2018/12/09 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
ES6对象操作实例详解
2020/05/23 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
JavaScript中Object、map、weakmap的区别分析
2020/12/15 Javascript
python关闭windows进程的方法
2015/04/18 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
python的time模块和datetime模块实例解析
2019/11/29 Python
Python 余弦相似度与皮尔逊相关系数 计算实例
2019/12/23 Python
python爬虫开发之selenium模块详细使用方法与实例全解
2020/03/09 Python
Python接口自动化测试的实现
2020/08/28 Python
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
国外软件测试工程师面试题
2016/12/09 面试题
Overload和Override的区别
2012/09/02 面试题
员工培训邀请函
2014/01/11 职场文书
2014三八妇女节活动总结范文四篇
2014/03/09 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
深入浅出讲解Java8函数式编程
2022/01/18 Java/Android