Vuex - How to persist store updates across different tabs?

Question

I have a Vue app using Vuex. If I have two tabs open, changes to the store in one tab do not show in the other.

How can I make sure store/data across all tabs is synced instantly?

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  getters: {
    tasks: state => state.tasks
  }
}

In the template:

computed: {
  tasks: function () {
    return this.$store.getters.tasks
  }
}

Sequence

could you show mutations property in your store – Mammary

Hello, how did you able to solve this problem. I can save data in local store but when I switch to another tab the local storage data isn't available (as the tab url is in different domain) – Birdie

Answer 1

This doesn't work by default. You can use vuex-shared-mutations. See here: https://github.com/xanf/vuex-shared-mutations

Laresa

Answer 2

You should add vuex-shared-mutations module:

npm i vuex-shared-mutations

import it

import createMutationsSharer from "vuex-shared-mutations";

and then add it in your store plugins:

const store = new Vuex.Store({
 // some other code...
plugins: [createMutationsSharer({ predicate: ["mutation1", "mutation2"] })]
});

Cory