Vue CLI Plugin Electron Builder中Vuex Action分发失败求助

Hey there, let's work through this error you're hitting. First off, I spot an obvious typo, but there's also an Electron-specific Vuex setup detail you might be missing with the vuex-electron plugins. Let's break it down step by step:

1. Fix the Typo First! #

Looking at your App.vue code, you wrote disptach instead of dispatch (missing a c). That's a quick fix:

// Wrong
this.$store.disptach("setUser", userInDb);

// Correct
this.$store.dispatch("setUser", userInDb);

2. Properly Set Up createSharedMutations for Electron #

The createSharedMutations plugin from vuex-electron lets your main and renderer processes share Vuex mutations, but it requires one critical step in the main process:

Import the Store in Your Electron Main Process #

In your main process file (usually background.js or main.js in your Electron setup), you need to import your Vuex store. This initializes the store in the main process so the renderer processes can connect to it properly:

// background.js (Electron main process)
import store from './path/to/your/store' // Replace with your actual store path

You don't need to do anything else with the store here—just importing it is enough to get the shared mutations working.

3. Confirm the Store is Mounted to Your Vue Instance #

Double-check your Vue entry file (like src/main.js) to make sure you're passing the store to the Vue instance. This is how this.$store becomes available in your components:

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store, // This line is crucial—don't omit it!
  render: h => h(App)
}).$mount('#app')

4. Debug to Verify the Store Instance #

If you're still having issues, add a console log in your App.vue created hook to check what this.$store actually is:

created() {
  console.log('Store instance:', this.$store);
  const userInDb = UserCotroller.getUser();
  this.$store.dispatch("setUser", userInDb);
}

If this.$store is undefined or doesn't have the dispatch method, that means the store isn't being injected correctly—double-check the steps above, especially the Vue instance mounting and main process import.

5. Check Plugin Order (Just to Be Safe) #

Your current plugin order (createPersistedState() first, then createSharedMutations()) is correct for vuex-electron, but if you run into weird state issues later, you can confirm this is the right order as per the plugin's expected behavior.

That should cover the main causes of your error. Start with the typo, then make sure the main process is importing the store, and you should be good to go!

内容的提问来源于stack exchange，提问作者fefe