如何使用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")
}