刷新 vue.js keep-alive 部分中的页面

Posted 2023-02-22

【中文标题】刷新 vue.js keep-alive 部分中的页面

【英文标题】：Refresh pages in vue.js keep-alive section

【发布时间】：2019-03-28 18:37:20

【问题描述】：

我有一个使用 vue-router 的 Vue.js SPA。因为登录后每个页面都需要保持状态（如过滤器/分页输入）这是使用keep-alive完成的：

<keep-alive>
  <router-view/>
</keep-alive>

这很好用，但是当有人注销并再次登录时，由于保持活动状态，我仍然看到相同的过滤器值。

我可以在注销时以某种方式以编程方式刷新/清除保持活动状态的页面吗？

【参考方案1】：

保持活动的组件位于this.$children 内部，因此您可能可以遍历它们并修改状态。

【参考方案2】：

一种使用 Vue 全局事件的方法。

Vue.prototype.$loginState = new Vue();

在您的组件中触发单击注销按钮的事件。

function logout()
    //your codes here to logout and then
    this.$loginState.$emit('logout');

在用户登录时看到的组件中，只需通过侦听事件触发“注销”将所有变量设置为其默认值。

<button @click="resetValues"> Logout </button>
methods: 
    resetValues()
        this.yourValue = '';
        this.filters = [];
    

created()
    this.$loginState.$on('logout', this.resetValues)

【参考方案3】：

我认为没有一种简单的方法可以做到这一点（以编程方式），所以你有两个选择。

选项 1 将是重置状态，这意味着您在内部跟踪初始状态并在注销时监听类似发出的内容以重置 组件恢复到初始状态。

选项 2 是使用类似这样的方式简单地换出 keep-alive 组件：

<keep-alive v-if="loggedIn">
    <router-view></router-view>
</keep-alive>

<router-view v-else></router-view>

【讨论】：

我使用了选项 2。这样所有信息都会在再次重新加载后重置（也在我没有完全访问权限的 vue-good-table 中）

选项 2 是一个我以前没有想到的好技巧。必须与动态组件一起使用。 +1