# vuex-broadcast

> A vuex plugin to share mutations between multiple instances of a same Vue app

Latest version **1.0.1** (published 2020-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vuex-broadcast
pnpm add vuex-broadcast
yarn add vuex-broadcast
bun add vuex-broadcast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2020-04-08 |
| First published | 2020-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 27 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Guillaume Denis |
| Maintainers | kangoula |
| Keywords | vuex, vue, persist, broadcast, share, mutation |

## Links

- npm: https://www.npmjs.com/package/vuex-broadcast
- Repository: https://github.com/Kangoula/vuex-broadcast
- Homepage: https://github.com/Kangoula/vuex-broadcast#readme
- Issues: https://github.com/Kangoula/vuex-broadcast/issues
- npm.io page: https://npm.io/package/vuex-broadcast

## Dependencies (2)

- [core-js](https://npm.io/package/core-js.md) ^3.6.4
- [broadcast-channel](https://npm.io/package/broadcast-channel.md) ^3.1.0

## Recent versions

- 1.0.1 (latest) — 2020-04-08
- 1.0.0 — 2020-04-08
- 1.0.0-0 — 2020-04-07

## README

# Vuex Broadcast

> ## Use with [my fork of Vuex](https://github.com/Kangoula/vuex)

Broadcast and share Vuex modules mutations between mupltiple instances of the same Vue application (like brower tabs) to keep them in sync.

## Install

```
npm install --save vuex-broadcast
```

## Usage

- add a `broadcast` key to the namespaced modules you want to broadcast the mutations

```javascript
// myModule.js

{
  broadcast: true,
  namespaced: true,

  state: {},
  mutations: {},
  actions: {}
}
```

- register the Vuex plugin

```javascript
import VuexBroadcast from "vuex-broadcast"

new Vuex.Store({
  modules: {}
  plugins: [new VuexBroadcast()]
})
```

From now on, each mutatons of the modules with the `broadcast` key set to `true` will be boradcasted to other app instances and applied in each of their Vuex stores.

## Options

You can pass an `options` argument to the contructor with the following properties:

- **moduleName** [String] defaults to `"vuexBroadcast"`: the vuex module name that will be registered, defaults to "vuexBroadcast"
- **enableLeaderElection** [Boolean], defaults to `false`: enable leader election
- **mainChannelName** [String] defaults to `"vuexBroadcast"`: the broadcast channel name, mainly used to elect a leader between all the app instances
- you can pass any option of the `broadcast-channel` library: https://github.com/pubkey/broadcast-channel/#set-options-when-creating-a-channel-optional

## Leader Election

As stated in https://github.com/pubkey/broadcast-channel/#using-the-leaderelection
You can also elect a leader between all of the instances of you app.

This plugin registers a vuex module, with its name set by the `moduleName` option.
This module exposes a state named `isLeader` which is set to true if the current instance is elected as leader.

You can access it like any regular vuex module:

```javascript
// in components via
this.$store.state[moduleName].isLeader
// or
mapState([moduleName], ['isLeader'])

// in your vuex store in:
// actions
myAction ({state, commit, rootState}, myActionArgument) {
  const isLeader = rootState[moduleName].isLeader
}

// getters
myGetter: (state, getters, rootState) => {
  const isLeader = rootState[moduleName].isLeader
}
```

---
_Source: https://npm.io/package/vuex-broadcast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._