路由刷新数据丢失 - vuex数据读取的问题

低级路由根据传递的参数请求数据，渲染到页面后刷新后页面空白

排查了很久，总感觉是携带的参数的问题，最后发现是请求的数据没有正确的读取，用计算属性解决了

路由跳转传参

      

          {{ nav.title }}
      

路由配置

const homeRouter = {
    path: '/home',
    component: Home,
    meta: { title: "主页" },
    children: [
        {
            name: "all",
            path: "all/:tab",
            component: All
        },
    ]
}

子路由发送请求

子路由

activated() {
    console.log(this);
    this.$store.dispatch("getTopic", this.$route.params.tab);
  },

vuex

import axios from 'axios';
const topicData = {
    actions: {
        getTopic(context, value) {
            axios.get(`https://cnodejs.org/api/v1/topics?tab=${value}`).then(res => {
                context.commit('GETTOPIC', res.data)
                console.log("根据" + value + "请求的数据", context.state)
            }).catch(err => {
                console.log(err.message)
            })
        }
    },
    mutations: {
        GETTOPIC(state, value) {
            state.topic = value.data
        }
    },
    state: {
        topic: []
    },
}
export default topicData

子路由读取请求的数据

起初读取失败的写法

data() {
    return {
      topic: this.$store.state.topicData.topic,
    };
  },

修改后

data() {
    return {
      topicData: this.$store.state.topicData,
    };
  },
computed: {
    topic: {
      get() {
        return this.topicData.topic;
      },
    },
  },

暂时解决，待完善...