第一次加载columnDetail页面，可以从store获取到column & posts，但刷新columnDetail页面store中的数据丢失

Question

请教老师一个问题：
在第一次路由到columnDetail时，页面的数据（column&posts）可以正常显示，然后刷新浏览器地址栏的url时，columnDetail组件就没法从store里面获取数据，从log里面看到下面的代码返回的column／list为没有数据

const column = computed(() => store.getters.getColumnById(currId))
const list = computed(() => store.getters.getPostById(currId))

请问下老师，刷新地址栏会导致store里面的数据清空吗？
如果会清空的话: 我对比了下home组件中获取columns 和 columnDetail组件中获取column&posts的方式是类似的；为什么在home页面做同样的刷新操作，页面的数据能够正常显示呢?

Answer 1

张轩 2020-12-09 15:18:42

同学你好 刷新这单独的页面的时候 要发送一次单独的请求这个单独的 column 数据的，从首页过去，因为所有 column 数据是已经被加载的 所以没有问题

onMounted(() => {
    store.dispatch('fetchColumn', currentId)
    store.dispatch('fetchPosts', { cid: currentId })
})

• 提问者 慕勒0141251 #1

  老师不好意思，小白一枚，没有太明白您说的。
  
  我昨天试着调试Home页面 和 ColumnDetail页面，有个问题我不是很能理解。下面是我所进行的操作以及看到的现象：
  
  1. 当从首页点击进入专栏页，onMounted钩子函数里面的请求数据会执行，能够获得column和posts的数据
  2.进入专栏页后，刷新url，onMounted钩子函数＊不会＊执行，获取不到column&posts的数据，所以页面报错，专栏页的文章等显示不出来；
  3.进入到Home页面后，页面数据能正常展示；刷新home页面的url后，Home.vue 里的onMounted钩子函数却＊会＊执行，所以页面能够获取到columns数据，并正常显示专栏列表；
  
  我的疑惑是：为什么在columnDetail页刷新url不会执行onMounted; 而在home页面刷新url却会执行onMounted呢？