vue vuex mapState 路由切换

Question

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组件为商品列表，加载页面后调用接口，请求商品数据，然后把数据存储到localStorage,当我点击某一个商品时跳转到对应的B组件，这个时候我在B组件，通过vuex中的mapState获取到this.fruitData,然后通过路由参数筛选出对应的商品，最后渲染出来，现在的问题时当我在A组件点击某一个商品到B组件时，B组件并没有数据，刷新一下就有了，这里面是什么原因？是加载顺序的问题么？computed和mapState是在什么时候执行的呢？

Answer 1

computed 和 mapState 在 beforeCreated 和 created 之间完成；
你也在代码里打印处 this.fruitData，可以看出执行顺序。
你可以使用 watch