如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

Posted 2023-02-22

【中文标题】如何使用 Nuxt.js 在 vuex 状态中获取本地存储数据

【英文标题】：How to get localstorage data inside vuex state with Nuxt.js

【发布时间】：2019-06-11 13:32:09

【问题描述】：

我正在使用 Nuxt 构建一个购物车。但是当我刷新页面时，购物篮会自动清空。

我尝试像 vuex-persist ， vuex-persistedstate ... 但我没有解决办法。

现在我正在寻找一种直接从本地存储中获取购物车初始状态的方法。

state: 
      cart: [] //here what i want => window.localStorage.getItem("cart")
    

非常感谢。

【参考方案1】：

您只能在浏览器中访问 localStorage。它在 s-s-r 期间无法访问。 因此，您需要在 vuex 存储中创建一个突变，它将执行您想要的操作并将其提交到挂载的钩子中（挂载仅在浏览器中执行）。

例如

...
mounted() 
 this.$store.commit('myMutation', window.localStorage.getItem("cart")

【讨论】：

谢谢@Aldarund，我会这样做的。

【参考方案2】：

使用 nuxt-vuex-localstorage 它工作得很好并且与 vuex 同步