(Nuxt) 页面在重新加载时不重新渲染数据

Question

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

基本上有两种情况：

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

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

Vue插件ss

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

解释：在 url 中直接输入 http://localhost:3000/assignments/explore 除了虚拟卡片外什么都没有显示

Vue插件ss

如您所见，分配的长度 state 是 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 Store

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 function 之前添加 return 语句

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

在这里找到我的答案

页面中的 Nuxtjs 异步等待在页面刷新时不起作用