尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题_尚品汇购物车请求成功但是没有数据

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

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

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

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

• 解决方法1

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

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

// Vuex将数据保存到 state 和 sessionsStorage 中
// actions中：
async getCartList({ commit }) {
    let result = await reqCartList()
    if (result.code === 200) {
        // 保存数据到sessionsStorage中, 避免ShopCart刷新页面后渲染失败
        sessionStorage.setItem('cartInfoList', JSON.stringify(result.data[0].cartInfoList))
        commit('GETCARTLIST', result.data)
    } else {
    	alert('获取购物车数据失败！')
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

// 子组件 ShopCart 中从 sessionStorage 获取数据
data() {
    return {
        cartInfoList: [],
    }
},
created() {
    this.$store.dispatch("getCartList")
    this.cartInfoList = JSON.parse(sessionStorage.getItem('cartInfoList'))
},
1
2
3
4
5
6
7
8
9
10

• 解决方法2

使用 v-if 来控制页面的渲染顺序，等待接口数据返回后再渲染页面

// 子组件结构
<template>
	<div class="cart" v-if="isShowPage">...</div>
</template>
1
2
3
4

// 子组件js
...
data() {
    return {
    	// 一开始先不让页面渲染
    	isShowPage: false
    };
},
methods: {
    async getCartList() {
        // 获取到数据后，才开始渲染页面
        await this.$store.dispatch("getCartList");
        this.isShowPage = true
    },
},
created() {
    this.getCartList()
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

结束；