大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

electron-vue,无法改变vuex状态

一、问题描述

在electron-vue中使用vuex,调用this.$store.dispatch("changeLogin");时,无法修改登录状态,调试了很久都没有看出问题在哪边。

store代码

const state = {
  isLogin: false
}

const getters = {
  isLogin(state) {
    return state.isLogin
  }
}

const mutations = {
  changeLogin(state) {
    state.isLogin = true
  }
}

const actions = {
  changeLogin(context) {
    context.commit("changeLogin")
  }
}

export default {
  state,
  getters,
  mutations,
  actions
}

调用修改状态的方法

console.log(this.$store.getters.isLogin);
console.log(this.$store);
this.$store.dispatch("changeLogin");
console.log(this.$store.getters.isLogin);

输出结果

isLogin初始是false,调用this.$store.dispatch("changeLogin");后输出结果还是false

控制台输出结果.png

二、解决方法

在GitHub的issue里搜了下,没有发现类似的问题,最后实在没办法,我就在segmentfault上提了这个问题,问题链接
得到的回答是 src/renderer/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'
})

问题是解决了,但还是不了解引起这个问题具体的原因,这个插件是用于多窗口共享状态的,去掉后应该会影响多窗口的传值,或许有其他的解决方案。

问题留待继续跟踪