Javascript Nuxt js中的localStorage在SSR模式下不工作

我试图使用vuex在购物车中添加项目，但控制台中出现了一些错误，页面中的产品也没有显示出来。请告诉我如何解决这个问题。 这是控制台中的错误

client.js?06a0:103 SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at Store.initializeStore (index.js?9101:14)
    at wrappedMutationHandler (vuex.esm.js?2f62:844)
    at commitIterator (vuex.esm.js?2f62:466)
    at Array.forEach (<anonymous>)
    at eval (vuex.esm.js?2f62:465)
    at Store._withCommit (vuex.esm.js?2f62:624)
    at Store.commit (vuex.esm.js?2f62:464)
    at Store.boundCommit [as commit] (vuex.esm.js?2f62:409)
    at VueComponent.mounted (default.vue?ec86:82)

这里是default.vue，我尝试从vuex访问localStorage

export default {
  data(){
    return{
      title:'QL Gadgets',
      cart:{
        items:[]
      },
    }
  },
  mounted(){
    this.$store.commit('initializeStore')
  },
  computed:{
    cartTotalLenght(){
      let totalLenght = 0
      for(let i=0; i < this.cart.items.length; i++){
        totalLenght += this.cart.items[i].quantity
      }
      return totalLenght
    }
  },
  methods:{
    handleClick(){
        if(this.$refs.menu.classList.contains('hidden')){
            this.$refs.menu.classList.remove('hidden')
        }
        else{
            this.$refs.menu.classList.add('hidden')
        }
    }
  },
}

导出默认值{
数据（）{
返回{
标题：“QL小工具”，
购物车：{
项目：[]
},
}
},
安装的（）{
此.$store.commit（'initializeStore'）
},
计算：{
cartotalenght（）{
设总长度=0
for（设i=0；i

服务器无法查看浏览器本地存储，因为本地存储是客户端的一项功能。我认为正在发生的是localStorage.getItem（'cart'）返回未定义，而您看到的错误是在试图找到有效的JSON时尝试JSON.parse undefined

由于在服务器渲染期间模板中安装了钩子，因此存储正在服务器端启动适用的函数

您需要等待在客户端调用localStorage.getItem，然后将其传递回服务器（如果加载后需要额外的节点访问，则使用服务器miidleware进行处理），或者只在客户端处理它并将结果提交到存储

---

我还发现，使用vuex persistedstate是对该逻辑或备选方案的一个很好的扩展，您可以在第一次提交后有选择地保留您的购物车，然后您的服务器可以在以后的应用程序实例化时访问它。

这里的问题可能是，在某个时候，您在本地存储中设置了一个不可解析JSON的字符串，或者响应中没有任何内容（

未定义的
以
u
开头）。使用您选择的浏览器（例如或）检查您的本地存储，查看是否存在这种情况

在任何情况下，您都应该处理从本地存储读取或解析结果的错误。例如，用户第一次访问页面时，页面上不会有任何内容，
JSON.parse
将失败。例如：

导出常量突变={
初始化存储（状态）{
试一试{
state.cart=JSON.parse（localStorage.getItem（'cart'））
}抓住{
localStorage.setItem（'cart'，JSON.stringify（state.cart））
}
}
}
mounted（）
钩子不能在服务器端运行。
export default {
  data(){
    return{
      title:'QL Gadgets',
      cart:{
        items:[]
      },
    }
  },
  mounted(){
    this.$store.commit('initializeStore')
  },
  computed:{
    cartTotalLenght(){
      let totalLenght = 0
      for(let i=0; i < this.cart.items.length; i++){
        totalLenght += this.cart.items[i].quantity
      }
      return totalLenght
    }
  },
  methods:{
    handleClick(){
        if(this.$refs.menu.classList.contains('hidden')){
            this.$refs.menu.classList.remove('hidden')
        }
        else{
            this.$refs.menu.classList.add('hidden')
        }
    }
  },
}