10bet:vue-electron下vuex dispatch不响应问题的解决

来源:http://www.chinese-glasses.com 作者:Web前端 人气:102 发布时间:2020-03-31
摘要:重启程序后commit也可以调用。 this.$store.commit('INCREMENT_MAIN_COUNTER');// this.$store.commit('INCREMENT_MAIN_COUNTER', payload); 在`/src/main/index.js,在前面加上一句 关键是 store,store 下面有一个 index.js 的

重启程序后commit也可以调用。

this.$store.commit('INCREMENT_MAIN_COUNTER');// this.$store.commit('INCREMENT_MAIN_COUNTER', payload);

在`/src/main/index.js,在前面加上一句

关键是 store,store 下面有一个 index.js 的主配置文件 index.js,和一个 modules 文件夹。

import './path/to/your/store'

而 modules/ 下面存放各个实体,例如上图中的 Auth.js 和 Counter.js,并通过 index.js 全部引入。

如果没有和主进程有过多的交互,也不需要和主进程共享store下存储的信息,简单粗暴的办法: 在/src/renderer/store/index.js 注释调用插件的方法:createPersistedState() ,createSharedMutations()

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

createPersistedState 是用localStorage持久化store中数据createSharedMutations 是多进程间共享 Vuex Store 的状态方法二

components 下面就是很多 .vue 文件,router 下面就是一些路由配置的 js 文件和一些拦截器的 js。

方法一

这种时候就不能用第一种方法来解决问题了。好在文档也说了,加上一行导入。找到 /src/main/index.js,在前面加上一句:

10bet,时间: 2019-10-23阅读: 75标签: 响应

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

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'})

网上的资料似乎也挺少。

electron-vue 中的vuex不支持commit,会报错:Please, don't use direct commit's, use dispatch instead of this. 用dispatch调用,没有响应。 其原因是用了vuex-electron的插件

解决方法有两个。

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

这是因为 vuex-electron 引入了一个用于多进程间共享 Vuex Store 的状态的插件。如果没有多进程交互的需求,完全可以不引入这个插件。

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

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

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

注释掉以后重启项目,用 this.$store.commit 就可以使用了。然而,如果需要多进程来处理怎么办?

import '../renderer/store'

import Vue from 'vue'import Vuex from 'vuex'import { createPersistedState, createSharedMutations } from 'vuex-electron'import modules from './modules'Vue.useexport default new Vuex.Store({ modules, plugins: [ createPersistedState(), createSharedMutations() ], strict: process.env.NODE_ENV !== 'production'})
import Vue from 'vue'import Vuex from 'vuex'import { createPersistedState, createSharedMutations } from 'vuex-electron'import modules from './modules'Vue.useexport default new Vuex.Store({ modules, plugins: [ createPersistedState(), createSharedMutations() // 注释掉这一行 ], strict: process.env.NODE_ENV !== 'production'})

本文由10bet发布于Web前端,转载请注明出处:10bet:vue-electron下vuex dispatch不响应问题的解决

关键词:

上一篇:没有了

下一篇:基于Vue-SSR优化方案归纳总结

最火资讯