前端 - 利用vuex实现两个组件之间通信，怎样保持通信一直存在呢？

问题描述

问 题

情况是这样的，有一个列表（组件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获取到的默认值吧？这个应该怎么解决呢？

解决方案

你的出发点就错了。

{
    path: '/details/:id',
    component: DetailPage
}

跳转的地方你都不需要自己写函数。

<router-link :to="`/details/${item.id}`">{{item.name}}</router-link>

然后在你的detail组件中根据params的id获取数据

export default {
    data() {
        return {
            detail: {}
        }
    },
    mounted() {
        this.$http.get(`/api/getDetail/${this.$route.params.id}`)
        .then(res => {
            this.detail = res;
        })
    }
}

这篇关于前端 - 利用vuex实现两个组件之间通信，怎样保持通信一直存在呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！