尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题

最新推荐文章于 2023-08-03 01:21:11 发布

noirscent

最新推荐文章于 2023-08-03 01:21:11 发布

阅读量488

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/never_stop_study/article/details/127204374

版权

在Vue尚品汇购物车页面遇到刷新后数据渲染失败的问题，原因是页面渲染时数据未及时从服务器获取。解决方案包括：1) 在跳转前通过dispatch请求数据并存入sessionStorage，子组件中读取此数据；2) 使用v-if指令确保数据返回后再进行渲染，避免控制台报错和页面异常展示。

摘要由CSDN通过智能技术生成

前提：我们在 ShopCart 购物车页面的 mounted / created 中写了 dispatch，向服务器请求了数据：

created() {
   
    this.$store.dispatch("getCartList")
}

当我们在刷新购物车页面时，created 钩子会重新向服务器发送请求获取数据，在网速慢的情况下，可能出现获取不到购物车列表的bug，这是由于数据还未获取到，页面已经渲染完毕导致的

控制台报错：cartInfoList 没有定义，且通过观察 Vue 开发者工具，我们可以看到：vuex 中开始没有 cartInfoList 数据，但过了一会就有了，再次印证了数据还未从服务器获取到，页面已经开始渲染

在这里插入图片描述

在父组件 Detail 跳转路由前，就 dispatch 向服务器发请求获取数据，在保存到 Vuex 的同时，保存到 sessionStorage 中

在子组件 ShopCart 的 created / mounted 钩子中将 sessionStorage 中的数据获取到

// Vuex将数据保存到 state 和 sessionsStorage 中
// actions中：
async getCartList({
     commit }) {
   
    let result