A Node.JS module to use Vuex on WebExtensions on "shared" context, the module allows you to start several instances of Vuex store and keep them synchronized throught WebExtensions messaging API.
Uses the Vuex store instance on background script as master, and replicate the state of master to others instances on diferent context (popup or content scripts), when you commit any mutation to any store instance the rest will also be updated automatically.
You can work with the Vuex store like a unic instance (or standart Vue.js application), without worry for the different WebExtensions contexts, the module gona solve all WebExtensions problems for you automatically.
Run the following command inside your WebExtensions project to install the module:
npm install vuex-webextensions --save
Import the module into your store file:
import VuexWebExtensions from 'vuex-webextensions';
Then add it as plugin on Vuex store initialization:
export default new Vuex.Store({
...
plugins: [VuexWebExtensions()]
});
All done!
⚠ Persistent states make use of
LocalStorage
to save the states in your browser, to use it, you should grantstorage
permision to your webextension
You can establish through the options of the plugin the states that you want to be persistent, your data will be preserved after the restart of the extension or the browser.
It is established passing the state names through persistentStates option in array:
export default new Vuex.Store({
...
plugins: [VuexWebExtensions({
persistentStates: ['stateone', 'statetwo']
})]
});
Then stateone
and statetwo
gona have the value commited by last mutation after extension or browser restart.
On version 2.5.0 vuex introduce a new method on their API to watch and hook any action of store, this plugin sync actions like mutations by default.
Note: Event objects (like click for example) on action payload are automatically trimmered because cause serialization errors, you can pass value or object as payload anyways always that are serializable.
If you want to disable the actions sync, just set syncActions
to false on the plugin settings.
export default new Vuex.Store({
...
plugins: [VuexWebExtensions({
syncActions: false
})]
});
You can ignore specific actions like mutations too on ignoredActions
list.
It's possible skip the sync on desired mutations or actions adding their type to ignoredMutations or ignoredActions option.
All mutations or actions added to this list skip the sync process, you should update the value or process manually on desired contexts.
export default new Vuex.Store({
...
plugins: [VuexWebExtensions({
ignoredMutations: ['MUTATION_TYPE_ONE', 'MUTATION_TYPE_TWO'],
ignoredActions: ['ACTION_TYPE_ONE', 'ACTION_TYPE_TWO']
})]
});
It's possible specify the minimun logging level of the plugin with the loggerLevel
option, by default only warnings and errors gona be printed on console.
The available options are: debug, verbose, info, warning, error and none.
The none option disable all logging related with the plugin.
export default new Vuex.Store({
...
plugins: [VuexWebExtensions({
loggerLevel: 'debug'
})]
});
⚠ This version have a breaking changes please check the new install method and remove the old install on your scripts
If you encounter a problem, issue or question feel free to open a new issue on this repository.
If you have some improvements, new features or fixes feel free to fork this repository and send a pull request.