Menu
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
}
}
972
This Vuex plugin allows you to sync and share the status of your Vue application across multiple tabs or windows using the local storage.
However, when the page is refreshed, the data in vuex will be reinitialized, resulting in data loss. Because the data in vuex is saved in the running memory, when the page is refreshed, the page will reload the vue instance, and the data in vuex will be re assigned.
Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes. You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations.
This doesn't work by default. You can use vuex-shared-mutations. See here: https://github.com/xanf/vuex-shared-mutations
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
