使用vuex-persistedstate的持久状态：当我在另一个选项卡

Question

您好我正在使用vuex persistedstate来保持我的状态。

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
// ...
    plugins: [createPersistedState()]
})

我想要做的是在另一个标签页中更新商店状态，更新后的商店状态应反映在我应用的其他打开标签中。

我怎样才能实现这一目标。

Answer 1

您可以尝试实施window.onfocus事件，以便在转到新标签页时调用getState方法。

Answer 2

您可以收听storage事件。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API中的使用StorageEvent 响应存储更改。

window.addEventListener("storage", e => {
    // ...
});

示例：https://github.com/jacobgoh101/vuex-sync-tabs-example

在store.js

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({
  plugins: [createPersistedState()],
  state: {
    count: 2
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setAll(state, payload) {
      state.count = payload.count;
    }
  },
  actions: {}
});

App.vue中的

<template>
  <div id="app">
    store count: {{$store.state.count}}
    <br>
    <button @click="$store.commit('increment')">add</button>
  </div>
</template>

<script>
export default {
  name: "app",
  mounted() {
    window.addEventListener("storage", e => {
      if (e.key !== "vuex") return;

      // exit if no change
      if (e.newValue === JSON.stringify(this.$store.state)) return;

      const persistedData = JSON.parse(e.newValue);

      this.$store.commit("setAll", persistedData);
    });
  }
};
</script>

Answer 3

使用它 vuex共享突变：

GitHub link