{"id":13536189,"url":"https://github.com/xanf/vuex-shared-mutations","last_synced_at":"2025-05-16T12:10:45.654Z","repository":{"id":44925643,"uuid":"80455431","full_name":"xanf/vuex-shared-mutations","owner":"xanf","description":"Share vuex mutations between tabs/windows","archived":false,"fork":false,"pushed_at":"2021-08-16T05:15:20.000Z","size":322,"stargazers_count":557,"open_issues_count":16,"forks_count":35,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T13:13:04.514Z","etag":null,"topics":["vue","vuejs2","vuex"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xanf.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-30T19:32:37.000Z","updated_at":"2025-05-02T11:53:45.000Z","dependencies_parsed_at":"2022-08-29T03:00:39.057Z","dependency_job_id":null,"html_url":"https://github.com/xanf/vuex-shared-mutations","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanf%2Fvuex-shared-mutations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanf%2Fvuex-shared-mutations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanf%2Fvuex-shared-mutations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xanf%2Fvuex-shared-mutations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xanf","download_url":"https://codeload.github.com/xanf/vuex-shared-mutations/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254527099,"owners_count":22085919,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vuejs2","vuex"],"created_at":"2024-08-01T09:00:35.642Z","updated_at":"2025-05-16T12:10:45.605Z","avatar_url":"https://github.com/xanf.png","language":"JavaScript","funding_links":[],"categories":["实用库","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript","公用事业","Components \u0026 Libraries","Utilities","Utilities [🔝](#readme)"],"sub_categories":["Libraries \u0026 Plugins","国家管理","Utilities","State Management"],"readme":"# vuex-shared-mutations\n\nShare certain [Vuex](http://vuex.vuejs.org/) mutations across multiple tabs/windows. [![NPM version](https://img.shields.io/npm/v/vuex-shared-mutations.svg?style=flat-square)](https://www.npmjs.com/package/vuex-shared-mutations) [![Build Status](https://img.shields.io/travis/xanf/vuex-shared-mutations.svg?style=flat-square)](https://travis-ci.org/xanf/vuex-shared-mutations) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=eDZyK0F0MlE1RzJuRHJHYVZLYWJIZ0JWdnNxdDM0M256dm1DMVBSVUd5bz0tLUhYN3FteXkvaDROSmtSbmZZREFiYnc9PQ==--9fd2deea21df436f47ded98bcd65032e88012900)](https://www.browserstack.com/automate/public-build/eDZyK0F0MlE1RzJuRHJHYVZLYWJIZ0JWdnNxdDM0M256dm1DMVBSVUd5bz0tLUhYN3FteXkvaDROSmtSbmZZREFiYnc9PQ==--9fd2deea21df436f47ded98bcd65032e88012900)\n\n- [Basic example](https://qk441m1kmq.codesandbox.io/)\n- [Nuxt example](https://98qn583znp.sse.codesandbox.io/)\n\n## Installation\n\n```bash\n$ npm install vuex-shared-mutations\n```\n\n## Usage\n\n```js\nimport createMutationsSharer from \"vuex-shared-mutations\";\n\nconst store = new Vuex.Store({\n  // ...\n  plugins: [createMutationsSharer({ predicate: [\"mutation1\", \"mutation2\"] })]\n});\n```\n\nSame as:\n\n```js\nimport createMutationsSharer from \"vuex-shared-mutations\";\n\nconst store = new Vuex.Store({\n  // ...\n  plugins: [\n    createMutationsSharer({\n      predicate: (mutation, state) =\u003e {\n        const predicate = [\"mutation1\", \"mutation2\"];\n        // Conditionally trigger other plugins subscription event here to\n        // have them called only once (in the tab where the commit happened)\n        // ie. save certain values to localStorage\n        // pluginStateChanged(mutation, state)\n        return predicate.indexOf(mutation.type) \u003e= 0;\n      }\n    })\n  ]\n});\n```\n\n## API\n\n### `createMutationsSharer([options])`\n\nCreates a new instance of the plugin with the given options. The following options\ncan be provided to configure the plugin for your specific needs:\n\n- `predicate \u003cArray\u003cstring\u003e | (mutation: { type: string, payload: any }, state: any) =\u003e boolean\u003e`: 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.\n- `strategy: { addEventListener: (fn: function) =\u003e any, share(any) =\u003e any }` - strategy is an object which provides two functions:\n  - `addEventListener` - plugin will subscribe to changes events using this function\n  - `share` - plugin will call this function when data should be shared\n\n## How it works\n\nInitially, 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\nIf you do not supply strategy system will use [BroadcastChannel](https://developer.mozilla.org/en-US/docs/Web/API/BroadcastChannel) if available and downgrade to localStorage if it fails.\n\nIf you need to configure strategies you can do that by hand, for example:\n\n```\nimport createMutationsSharer, { BroadcastStrategy } from 'vuex-shared-mutations';\n\nconst store = new Vuex.Store({\n  // ...\n  plugins: [\n    createMutationsSharer({\n      predicate: ['m-1'],\n      strategy: new BroadcastStrategy({ key: 'CHANNEL_NAME' })\n    }),\n  ],\n});\n```\n\nOptions accepted by `BroadcastStrategy`: - `key: string` - channel name, using for sharing\n\nOptions 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)\n\n## Contributing\n\n- Fork\n- `\u003e git clone`\n- `\u003e npm install`\n- Make your changes\n- `\u003e npm run test` (assuming you have Chrome installed in your system)\n- `\u003e npm run lint`\n- If everything is passing: - Update CHANGELOG.md - Commit and Make a pull request\n\n## License\n\nMIT © [Illya Klymov](https://github.com/xanf)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxanf%2Fvuex-shared-mutations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxanf%2Fvuex-shared-mutations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxanf%2Fvuex-shared-mutations/lists"}