javascript - (Nuxt)页面不会在重新加载时重新呈现数据
问题描述
我正在尝试创建一个从服务器获取数据并将它们显示给用户。但问题是除了虚拟信息之外什么都没有显示。
基本上有两种情况:
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)
},
}
任何帮助将不胜感激
解决方案
找到了解决方案
我只需要在 fetch() 中的调度函数之前添加 return 语句
fetch(){
return this.$store.dispatch('assignment/fetchAssignment')
}
在这里找到我的答案
推荐阅读
- swift - 将敌人移动到玩家的新位置
- javascript - 为什么下载的excel文件“损坏”
- python-3.x - Python从类中的另一个函数调用一个函数
- slurm - Slurm:作业的代码如何到达计算节点?
- json - JSON github服务问题
- visual-studio-code - VS Code - 找不到类型或命名空间名称“系统”错误
- vue.js - 如何使用 vue-cli create 修复错误“没有这样的文件或目录错误”
- java - 为什么单线程操作比无线程操作花费的时间长 3 倍?
- powershell - 如何使用 PowerShell 为带有文件路径参数的 exe 创建 SymbolicLink?
- vb.net - VB.Net WinForms 参考 Combobox SelectedValue using ActiveForms.Controls