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

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

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

当我们在刷新购物车页面时，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