解决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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
js 内存释放问题
Apr 25 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
Jan 23 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
JS中对Cookie的操作详解
Aug 05 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
JS实现简单拖拽效果
Jun 21 Javascript
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
angular中ui calendar的一些使用心得(推荐)
Nov 03 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
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
jquery dialog键盘事件代码
2010/08/01 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JS中使用变量保存arguments对象的方法
2016/06/03 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
canvas实现钟表效果
2017/02/13 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
vue.js购物车添加商品组件的方法
2019/09/17 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
JavaScript中如何调用Java方法
2020/09/16 Javascript
python 快速排序代码
2009/11/23 Python
python实现的系统实用log类实例
2015/06/30 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
pygame实现非图片按钮效果
2019/10/29 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
CSS3标注引用的出处和来源的方法
2020/02/25 HTML / CSS
司法局2014法制宣传日活动总结
2014/11/01 职场文书
就业意向协议书
2015/01/29 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
入党转正介绍人意见
2015/06/03 职场文书
大学社团活动总结怎么写
2019/06/21 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python实现简单聊天功能
2021/07/07 Python
python实现双链表
2022/05/25 Python