A組件：
 getFruitData(){
             this.$http.get("../../../../static/fruit.json").then((res)=>{
               console.log(res);
                 var fruitData = res.data.data.fruitData;
                 this.sliderFruitData = fruitData.filter((item)=>{
                     return item.sliderImg === true
                 });
                 localStorage.setItem('fruitData', JSON.stringify(fruitData));
             })
         },
         getProDetail(proId){
           this.$router.push({ path: "B", query: { id: proId } });
         }
B組件：
created(){
       var currentId = parseInt(this.$route.query.id);
         console.log(this.fruitData);
         this.currentFruit = this.fruitData.filter((item)=>{
            return item.id === currentId   
         });
     },
     computed:{
         ...mapState([
                 'fruitData',
                 "carts"
     ])
     },
    mounted(){
         console.log(this.fruitData);
         this.cartLen = this.carts.length;
     }
vuex state.js
const state={
    fruitData:localStorage["fruitData"]?JSON.parse(localStorage["fruitData"]): [],
}

export default state

A組件為商品列表，加載頁面后調(diào)用接口，請求商品數(shù)據(jù)，然后把數(shù)據(jù)存儲到localStorage,當(dāng)我點擊某一個商品時跳轉(zhuǎn)到對應(yīng)的B組件，這個時候我在B組件，通過vuex中的mapState獲取到this.fruitData,然后通過路由參數(shù)篩選出對應(yīng)的商品，最后渲染出來，現(xiàn)在的問題時當(dāng)我在A組件點擊某一個商品到B組件時，B組件并沒有數(shù)據(jù)，刷新一下就有了，這里面是什么原因？是加載順序的問題么？computed和mapState是在什么時候執(zhí)行的呢？