情况是这样的,有一个列表(组件a)点击这个这列表中某一项跳转到这一项的详情页面(组件b),我需要知道点击的这一项的id才能在调转都详情页面的时候知道调取后台的哪个数据。
组件a 点击这个函数,调转页面并且将id传给vuex
goDetails(id){
console.log(id)
this.$store.commit('changeId',id);
this.$router.push({path:'/details'});
}
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state={
dataId:0,
};
export default new Vuex.Store({
state,
mutations:{
changeId(state,payload){
state.dataId=payload
}
}
})
组件b 获取到vuex穿过的id
mounted:function(){
this.showlist();
},
methods:{
showlist(){
var _this=this;
var params={
id:this.$store.state.dataId
}
this.$http.post('/api/list/showlist',params).then((response)=>{
//列表数据
var result=JSON.parse(response.bodyText).data;
//数据的总数量
var sum=JSON.parse(response.bodyText).sum;
for(var i=0;i<Math.ceil(sum/params.limit);i++){
_this.sumpage.push(i);
}
console.log(response);
});
},
}
如果是从组件a跳转到组件b,效果是对的,可以获取到id;问题是当我刷新组件b的时候,id就直接变成0了,是从我直接从vuex获取到的默认值吧?这个应该怎么解决呢?
你的出发点就错了。
跳转的地方你都不需要自己写函数。
然后在你的detail组件中根据params的id获取数据