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

Question

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

我尝试像 vuex-persist 、 vuex-persistedstate 这样的库……但我没有解决方案。

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

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

非常感谢。

Answer 1

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

例如

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