The easiest way to share your Vuex Store between all processes (including main).
⭐ Persisted state
⭐ Shared mutations
Installation of the Vuex Electron easy as 1-2-3.
-
Install package with using of yarn or npm:
yarn add vuex-electron
or
npm install vuex-electron
-
Include plugins in your Vuex store::
import Vue from "vue" import Vuex from "vuex" import { createPersistedState, createSharedMutations } from "vuex-electron" Vue.use(Vuex) export default new Vuex.Store({ // ... plugins: [ createPersistedState(), createSharedMutations() ], // ... })
-
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 examplesrc/main.js
):import './path/to/your/store'
-
Well done you did it! The last step is to add the star to this repo 😄
Usage example: Vuex Electron Example
In renderer process to call actions you need to use dispatch
or mapActions
. Don't use commit
because actions fired via commit
will not be shared between processes.
Available options for createPersistedState()
createPersistedState({
whitelist: ["whitelistedMutation", "anotherWhitelistedMutation"],
// or
whitelist: (mutation) => {
return true
},
// or
blacklist: ["ignoredMutation", "anotherIgnoredMutation"],
// or
blacklist: (mutation) => {
return true
}
})
Andrew Emelianenko
IG: @truemelianenko