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

Posted 2023-03-10

【中文标题】（Nuxt）页面不会在重新加载时重新呈现数据

【英文标题】：(Nuxt) Page not re-rendering data on reload

【发布时间】：2020-11-08 00:21:29

【问题描述】：

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

基本上有两种情况：

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)
  ,

任何帮助将不胜感激

【参考方案1】：

找到解决方案

我只需要在 fetch() 中的 dispatch 函数之前添加 return 语句

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

在这里找到我的答案

Nuxtjs async await in a page doesnt work on page refresh

【讨论】：

很好地呼吁这一点。这是官方文档中的 sn-p：nuxtjs.org/docs/2.x/features/data-fetching#the-fetch-hook