时间戳

首页 > 解决方案 > Vue 创建的钩子：根据 localStorage 键渲染不同的数据

javascript - Vue 创建的钩子：根据 localStorage 键渲染不同的数据

问题描述

我有一个仪表板，出于解释目的，可以显示打开的票证或关闭的票证。我将它们分成两个 API 调用。

如果withClosed参数设置为 0，则显示打开的票证。如果设置为 1，则显示已关闭的工单。

getTickets: function (region, withClosed=0) {
    // do stuff here
}

创建的钩子：

created: function () {
    this.getTickets(this.region, 0);
}

如果我想显示已关闭的票，我只需设置withClosed为 1 而不是 0。显示票。那里没有问题。

localStorage是我被绊倒的地方。如果显示已关闭的票证，我会在mounted()挂钩中执行以下操作：

if (localStorage.getItem('savedClosedTickets')){
  this.closed_tickets = JSON.parse(localStorage.getItem('savedClosedTickets'));
}

需要明确的是，savedClosedTickets密钥是通过setItem在观察者中设置的closed_tickets。

如果我查看 Chrome 开发工具，closed_tickets这确实是我想要的：

localStorage savedClosedTickets 键

然而，在刷新页面时，它会显示打开的票，这当然是因为created钩子里的东西。

我玩弄了beforeCreateandbeforeMount钩子，但无济于事。我试过做一个if/else getItem()in the createdhook 但它会在刷新时不断显示打开的票证。

解决这个问题的适当方法是什么？

标签： javascriptvue.jsvue-component

解决方案

用下面的方法解决了。奇怪的removeItem是，如果它是布尔值，localStorage 并没有删除该项目，只是将其设置为 false。所以在创建的钩子中检查了它。有点脏：

if (localStorage.getItem('savedClosedTickets') === "true"){
  // render closed tickets
} else if (localStorage.getItem('savedClosedTickets') === "false"){
  // render open tickets
} else {
  // falls here on initial load (no pairs set), so render open tickets
}

在显示已关闭工单的方法中，如果未启用切换（单击、选中等），则 removeItem：

localStorage.removeItem('savedClosedTickets');

推荐阅读