如何使用 vue-router 正确清除应用程序中的 Vuex 状态？

Question

我有一个 vuex 商店，当我浏览我网站的页面时它会增加。每个页面都有自己的存储区，用于存储该页面的特定信息。我知道如何编写一个函数来负责清除我的状态，但我不知道在我的代码中在哪里调用这个函数。

假设我有 5 个页面，其中 3 个拥有自己的特定商店，当我移出一个页面时应将其删除，但另外 2 个具有共同状态，只有当我移出时才应将其删除这些页面，但是当我在这两个页面之间移动时 - 商店应该保持现在的状态。商店数据通过 AJAX 个请求获取。

你是怎么处理这个问题的？本来想听听 $route 的变化，但是有件事让我觉得不对。

我清理商店的函数 (reset_state):

const getDefaultState = () => {
    return {
        widgets: null
    }
}

export const items = {

    state: () => ({
        data: null
    }),
    mutations: {
        reset_state (state) {
            Object.assign(state, getDefaultState())
        }
    },
    actions: {
        resetItems({ commit }) {
            commit("reset_state");
        },
    }
}

Answer 1

您应该在 beforeDestroy 生命周期钩子内或 beforeRouteLeave 钩子内调用您的函数 - 取决于您是否将路由包装在 keep-alive.[=13 内=]

如何使用 vue-router 正确清除应用程序中的 Vuex 状态？

How to properly clear Vuex state in an application with vue-router?

javascript

vue.js

vue-router

vuex