Need help with vuex-shared-mutations?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

549 Stars 36 Forks MIT License 13 Commits 16 Opened issues


Share vuex mutations between tabs/windows

Services available


Need anything else?

Contributors list

# 114,120
13 commits


Share certain Vuex mutations across multiple tabs/windows. NPM version Build Status BrowserStack Status


$ 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:

  • predicate  | (mutation: { type: string, payload: any }, state: any) => boolean>
    : Either an array of mutation types to be shared or predicate function, which accepts whole mutation object (and state) and returns
    if this mutation should be shared.
  • strategy: { addEventListener: (fn: function) => any, share(any) => any }
    - strategy is an object which provides two functions:
    • addEventListener
      - plugin will subscribe to changes events using this function
    • share
      - plugin will call this function when data should be shared

How it works

Initially, this plugin started as a small plugin to share data between tabs using

. But several inconsistencies in Internet Explorer lead to entire plugin rewrite and now it is not tied to localStorage anymore If you do not supply strategy system will use BroadcastChannel if available and downgrade to localStorage if it fails.

If you need to configure strategies you can do that by hand, for example:

import createMutationsSharer, { BroadcastStrategy } from 'vuex-shared-mutations';

const store = new Vuex.Store({ // ... plugins: [ createMutationsSharer({ predicate: ['m-1'], strategy: new BroadcastStrategy({ key: 'CHANNEL_NAME' }) }), ], });

Options accepted by

: -
key: string
- channel name, using for sharing

Options accepted by

: -
key: string
- key, used in localStorage (default: 'vuex-shared-mutations') -
maxMessageLength: number
- In some browsers (hello, Internet Explorer), when you're setting big payload on localStorage, "storage" event is not triggered. This strategy bypasses it by splitting message in chunk. If you do not need to support old browsers, you can increase this number (default: 4096)


  • Fork
  • > git clone
  • > npm install
  • Make your changes
  • > npm run test
    (assuming you have Chrome installed in your system)
  • > npm run lint
  • If everything is passing: - Update - Commit and Make a pull request


MIT © Illya Klymov

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.