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 stateA component is a list of goods. After loading the page, call the API to request the product data, and then store the data in localStorage,. When I click on a product, I jump to the corresponding B component. At this time, I get the this.fruitData, through the mapState in vuex and filter the corresponding product through the routing parameters, and finally render it. The problem now is when I click on a commodity in the A component to the B component. B component does not have data, it can be refreshed. What is the reason for this? Is it a matter of loading order? When were computed and mapState executed?