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

Question

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

基本上有两种情况：

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

解释：比如从 http://localhost:3000/ 到 http://localhost:3000/assignments/explore 会按预期呈现所有获取的内容。

Vue 插件 ss

2。通过url直接进入页面或者按刷新

说明：直接在url中输入http://localhost:3000/assignments/explore，除了虚拟卡什么都没有显示

Vue 插件 ss

如您所见，赋值状态的长度是 1 而不是 3，并且在这种情况下也缺少 vuex 操作 saveAssignments

explore.vue 中的模板标签

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

explore.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() 中的 dispatch 函数之前添加 return 语句

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

在这里找到我的答案

Nuxtjs async await in a page doesnt work on page refresh