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

【问题标题】：How to properly clear Vuex state in an application with vue-router?如何使用 vue-router 正确清除应用程序中的 Vuex 状态？
【发布时间】：2021-01-11 14:21:31
【问题描述】：

我有一个 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");
        },
    }
}

【问题讨论】：

标签： javascript vue.js vuex vue-router

【解决方案1】：

您应该在 beforeDestroy 生命周期挂钩内或 beforeRouteLeave 挂钩内调用您的函数 - 取决于您是否将路由包装在 keep-alive 内。

【讨论】：