localstorage.getItem() 在 NUXT JS 中不起作用

Posted 2023-02-22

【中文标题】localstorage.getItem() 在 NUXT JS 中不起作用

【英文标题】：localstorage.getItem() not working in NUXT JS

【发布时间】：2021-07-03 02:54:09

【问题描述】：

我正在尝试使用 nuxt js 开发一个购物车。我已成功将购物车数据存储在本地存储中，但无法检索数据。

注意：我不想使用 vuex-persistedstate。

【问题讨论】：

究竟是什么问题？出现错误、未返回数据、响应与预期不同？

查看我检查的第一个文件是否可以从本地存储中获得数据，然后显示该数据。如果没有，则显示一个空数组。但它总是返回空数组。

阅读我的回答。这里有很多问题。为了使 Vuex 具有响应性，您需要在提交中更新值。其次，提交应该始终没有副作用，并且只更新单个存储项。您可以链接提交，或使用操作从提交中运行其他方法

【参考方案1】：

我发现这有很多小问题。

首先，从您提交saveInLocalStorage 的事实来看，您似乎已经输入了addToCart 和saveInLocalStorage。

突变只能用于设置单个 Vuex 变量的状态。

它们应该是纯净的，这意味着它们不应该有副作用。

在使用dispatch 运行saveInLocalStorage 操作之前，您需要使用saveInLocalStorage 的操作和commit 的操作addToCart 突变。

其次，不清楚您实际上是在哪里运行此 get from local storage 功能。你是在 Vuex 商店的顶层运行它吗？

如果是这样，为了解决它不更新 Vuex 存储的实际问题，您将希望有一个函数负责获取 storedCart 的值并使用它将 cart 设置为突变以确保 Vuex存储实际更新。

最后，这里没有必要使用三元组。只需将 Vuex cart 对象设置为空数组即可。

【讨论】：

你能告诉我如何制作一个更新购物车并将其设置为 storeCart 的函数

这只是一个突变。你的意思是从本地存储加载它并设置它？同样，这也必须是一个突变。任何更新 Vuex 变量的东西都需要是一个突变。任何有副作用的事情都需要采取行动。动作可以使用突变。阅读此 :) vuex.vuejs.org/guide/actions.html 了解操作

您应该创建一个保存到本地存储的操作，然后提交一个更改以推送到购物车。然后你应该创建一个从本地存储获取的突变并设置存储数据

假设我有一个突变 getCartFromLocal() 我从本地存储中获取我的数据。我应该在哪里提交突变？

你可以从任何你想要的地方调用它，真的。我个人会在你的布局/页面组件的created() 生命周期钩子中调用它——第一个，最顶层的组件。如果它依赖于首先安装的组件，请改用mounted()