Home

Awesome

vuex-shared-mutations

Share certain Vuex mutations across multiple tabs/windows. NPM version Build Status BrowserStack 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:

How it works

Initially, this plugin started as a small plugin to share data between tabs using localStorage. 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 BroadcastStrategy: - key: string - channel name, using for sharing

Options accepted by LocalStorageStrategy: - 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)

Contributing

License

MIT © Illya Klymov