（Nuxt）页面在重新加载时未重新呈现数据

Question

我正在尝试创建一个以从服务器获取数据并将其显示给用户。但是问题在于，除了虚拟信息之外，什么都没有显示。

基本上有两种情况：

1。从其他链接导航到页面（按预期工作）

说明：例如从http：// localhost：3000 /转到http：// localhost：3000 / assignments / explore，它会按预期呈现所有提取的内容。

Vue插件ss

2。直接通过网址进入页面或按刷新

说明：直接在网址中输入http：// localhost：3000 / assignments / explore，除了虚拟卡外，什么都不会显示

Vue插件ss

您可以看到分配状态的长度是1而不是3，在这种情况下vuex操作saveAssignments也丢失了

explorer.vue中的模板标记

...
<div v-for="assignment in assignments" :key="assignment._id">
   <Card :assignment="assignment"></Card>
</div>
...

explorer.vue中的脚本标签

fetch() {    
  this.$store.dispatch('assignment/fetchAssignment')
},
computed: {
  assignments() {
    return this.$store.state.assignment.assignments
  },
 },

assignment.js // Vuex商店

export const state = () => ({
  assignments: [ //dummy data
    {
      _id: '5f1295181ebf00dd0070de1',
      title: 'dummy',
      Description: 'asfd',
      Price: 50,
      createdAt: '2020-07-18T06:22:09.037Z',
      updatedAt: '2020-07-18T06:22:09.037Z',
      __v: 0,
      id: '5f12951081ebf00dd0070de1',
    },
  ],
})
export const mutations = {
  saveAssignments(state, newAssignments) {
    state.assignments = state.assignments.concat(newAssignments)
  },
}
export const actions = {
  async fetchAssignment({ commit }) {
    const data = await this.$axios.$get('assignments')

    commit('saveAssignments', data)
  },
}

任何帮助将不胜感激

Answer 1

找到了解决方案

我只需要在fetch（）中的调度功能之前添加return语句

fetch(){
  return this.$store.dispatch('assignment/fetchAssignment')
}

在这里找到我的答案

Nuxtjs async await in a page doesnt work on page refresh