路由刷新数据丢失|路由刷新数据丢失 - 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数据读取的问题】vuex
import axios from 'axios';
const topicData = https://www.it610.com/article/{
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;
},
},
},暂时解决，待完善...
推荐阅读
- Docker应用:容器间通信与Mariadb数据库主从复制
- 使用协程爬取网页，计算网页数据大小
- Java|Java基础——数组
- Python数据分析(一)（Matplotlib使用）
- Jsr303做前端数据校验
- Spark|Spark 数据倾斜及其解决方案
- 数据库设计与优化
- 爬虫数据处理HTML转义字符
- 数据库总结语句
- MySql数据库备份与恢复