Vuex页面刷新,数据丢失问题

122 阅读1分钟

vuex的数据并不是丢失了,而是初始化回到了初始值。

vuex-persistedstate可以自动存储

npm install --save vuex-persistedstate

在store.js中引入
import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

  //配置
  plugins: [createPersistedState()]
})

刷新时菜单有了,但是路由没有了

在app.vue中重新调用setMenu

<script>
export default {
name: "app",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
    };
  },
  watch: {
    "$store.state.menu": {
      handler(val, old) {
        if (!old && this.user && this.user.no) {
          this.$store.commit("setMenu", val);
        }
      },
      immediate: true,
    },
  },
};
</script>