Share vuex mutations between tabs/windows
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist ### Added Feb 18, 2017
src ### Added Feb 18, 2017
test Properly disable plugin if window is not available Feb 1, 2017
.gitignore Initial commit Jan 30, 2017
.travis.yml Add travis CI Jan 30, 2017
CHANGELOG.md Bump version Jun 22, 2018
LICENSE Initial commit Jan 30, 2017
README.md ### Added Feb 18, 2017
package.json Bump version Jun 22, 2018
yarn.lock Initial commit Jan 30, 2017

README.md

vuex-shared-mutations

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

NPM version Build Status

Installation

$ npm install vuex-shared-mutations

Usage

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;
  } })]
})

API

createMutationsSharer([options])

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.

How it works

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).

Contributing

  • 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

License

MIT © Illya Klymov