vue-electron / vuex-electron

Integration of Vuex and Electron
MIT License
305 stars 97 forks source link

Dispatch not being fired from component #12

Open SGarno opened 5 years ago

SGarno commented 5 years ago

I am having an issue with attempting to dispatch an action within a component. It seems that the dispatch is not being received by the store action.

However, if I change the setter to use this.$store.originalDispatch() it works fine.

It appears that notifyMain in shared-mutations.js is not working. What am I missing here?

(FYI: I am using Nuxt, so access to the store is via this.$store.)

In my template I have:

<v-text-field
  slot="activator"
  v-model="sample"
  label="Sample store test"
  hint="Is it working???"
></v-text-field>

The setter and getter I have defined as:

  computed: {
    sample: {
      get: function() {
        return this.$store.state.sample;
      },
      set: function(val) {
        this.$store.dispatch("updateSample", { value: val });
      }
    }
  },

The updateSample never gets fired in my store:

state: {
    sample: 'Hey there!'
},
plugins: [ createPersistedState(), createSharedMutations() ],
getters: {},
mutations: {
    setSample(state, val) {
        debugger;
        state.sample = val;
    }
},
actions: {
    updateSample(store, payload) {
        debugger;
        store.commit('setSample', payload.value);
    }
},
Stormtv commented 5 years ago

I think I ran into this issue before

Did you make sure to

import store from '../renderer/store'

inside your electron index.js (the one where the createWindow function and auto updater is) I'm not sure why this required in the build even if the variable is unused but I haven't had time to figure it out

daniel-farina commented 5 years ago

Confused about this. I had the exact same issue as @BlackConure and it adding

import store from '../renderer/store'

as mentioned by @Stormtv to the src/main/index.js fixed the issue for me. Dispatching to store is now working.

Thank you

SGarno commented 5 years ago

Why would you need to import the store but not reference it anywhere? In Nuxt, the store is in this.$store. By doing an import and having it work seems to suggest that somewhere down the line it is referencing window.store instead of this.store (?)

@daniel-farina I am using Nuxt which doesn't use src/main/index.js and doesn't have '../renderer/store'. Store in Nuxt is added via /store/index.js file. My code is more like this:

import Vuex from 'vuex';
import { createPersistedState, createSharedMutations } from 'vuex-electron';

const createStore = () => {
    return new Vuex.Store({
        state: {},
        plugins: [ createPersistedState(), createSharedMutations() ],
        mutations: {},
        actions: {},
        strict: process.env.NODE_ENV !== 'production'
        });
}

For now, I am using originalDispatch() until this can get addressed.

akodkod commented 5 years ago

@SGarno you need to create an instance of the store in all your processes (main and renderer), so they could communicate with each other.

mittalyashu commented 5 years ago

I am still facing this issue, I have even imported vuex store in the component itself.

UPDATE: This comment fixes the problem.

mittalyashu commented 5 years ago

The solution of this problem is already mentioned in the readme.md file.

We need to import store in the main/index.js file only if we want to use createSharedMutations plugin. Otherwise we don't have to do it.

akodkod commented 5 years ago

https://github.com/vue-electron/vuex-electron/issues/44