Share certain Vuex mutations across multiple tabs/windows using localStorage.

$ npm install vuex-shared-mutations

import createMutationsSharer from 'vuex-shared-mutations'

const store = new Vuex.Store({
  // ...
  plugins: [createMutationsSharer({ predicate: ['mutation1', 'mutation2'] })]
})

Same as:

import createMutationsSharer from 'vuex-shared-mutations'

const store = new Vuex.Store({
  // ...
  plugins: [createMutationsSharer({ predicate: (mutation, state) => {
    const predicate = ['mutation1', 'mutation2']

    // Conditionally trigger other plugins subscription event here to
    // have them called only once (in the tab where the commit happened)
    // ie. save certain values to localStorage
    // pluginStateChanged(mutation, state)

    return predicate.indexOf(mutation.type) >= 0;
  } })]
})

Creates a new instance of the plugin with the given options. The following options can be provided to configure the plugin for your specific needs:

• sharingKey <String>: The key used to share actions via localStorage. (default: vuex-mutations-sharer)
• predicate <Array | Function>: Either an array of mutation types to be shared or predicate function, which accepts whole mutation object (and state) and returns true if this mutation should be shared.

When $store.commit is called, the plugin is invoked and saves the mutation object to localStorage. This triggers an storage event in all other tabs/windows (in the same browser, with the same site domain loaded), which then replays the mutation in that tab/window (during which the sync is turned off to disable recursion).

• Fork
• > git clone
• > yarn (like npm install)
• > yarn global add ava (test runner)
• Make your changes to src/index.js
• > npm run test
• > npm run lint
• If everything is passing:
  • Update CHANGELOG.md
  • Commit and Make a pull request

MIT © Illya Klymov