解决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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
大家未必知道的Js技巧收藏
Apr 07 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
js实现当前输入框高亮显示的方法
Aug 19 Javascript
探索Javascript中this的奥秘
Dec 11 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
详解Vue单元测试Karma+Mocha学习笔记
Jan 31 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
vue 实现把路由单独分离出来
Aug 13 Javascript
微信小程序上传文件到阿里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
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
判定是否原生方法的JS代码
2013/11/12 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
React中的refs的使用教程
2018/02/13 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
简单了解three.js 着色器材质
2020/08/03 Javascript
vue+node 实现视频在线播放的实例代码
2020/10/19 Javascript
python为tornado添加recaptcha验证码功能
2014/02/26 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
Pytorch之contiguous的用法
2019/12/31 Python
Python嵌入C/C++进行开发详解
2020/06/09 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
calendar在python3时间中常用函数举例详解
2020/11/18 Python
5 个强大的HTML5 API 函数推荐
2014/11/19 HTML / CSS
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
办公自动化毕业生求职信
2014/03/09 职场文书
应届毕业生自荐书
2014/06/18 职场文书
政风行风评议整改方案
2014/09/15 职场文书
依法行政工作汇报材料
2014/10/28 职场文书
瘦西湖导游词
2015/02/03 职场文书
小学一年级班主任工作经验交流材料
2015/11/02 职场文书
python之django路由和视图案例教程
2021/07/26 Python
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android