Vue.js 无页面重新加载时Vuex状态不反应

问题经验包括以下设置： 简单Nuxt安装v2^ 使用Vuetify和Axios

我已经用一个真正的后端构建了一个包含很多额外功能的高级应用程序，但我决定在一个简单的新安装的Nuxt上复制这个错误，以便能够为你们创建一个回购。因此，您可能不清楚该演示的功能，但在现实生活中，该应用程序正在使用任务和项目。用户必须能够更改每个任务的状态

如果我不能实现这个功能，我就不知道如何进一步使用这个应用程序。我的第一个想法是，它可能是Nuxt/Vue的一个bug，但我希望有人能告诉我我错了

看起来很简单？！好吧，7天后，我还没有接近解决我遇到的这个小错误

为了便于访问，我加载了一个简单的github演示，只需3个步骤就可以重现错误

步骤：运行“npm运行开发”后，如下所示：

步骤1：从索引页（）开始

步骤2：单击“查看任务”

步骤3：按按钮尝试更改任务的状态

第四步：现在刷新页面，它会突然工作

要重复此问题，只需导航回主页，刷新（重新加载）页面，然后从步骤1重新开始

我尝试了很多方法，但没有一种有效：

**一,。我已经将包含注释列表的整个子组件移动到父组件中，以消除传递道具的问题

我使用了Vue.set和array.splice，而不仅仅是用索引替换数组项

我已在这些计算阵列上启用了监视程序，并将“deep”设置为true

我已经使用了async并通过删除它们并在某些地方添加它们来等待

我使用了$nextTick函数来查看是否存在渲染问题

我已经将数组放置在它自己的父级状态属性中（虽然数组中的子元素中有postId字段），但是我如何才能在状态中包含对象？对象必须具有“子”元素

我引用了父组件的计算属性，而不是子组件中的道具**

我的任务页面：

<template>
  <v-container fluid>
    <v-row v-for="task in myTasks" :key="task.id">
      <v-col>
        <v-card class="ma-4">
          <v-card-title>{{task.title}}</v-card-title>
          <v-card-text>
            <p>{{task.description}}</p>
            <p class="blue--text">{{task.status}}</p>
          </v-card-text>
          <v-card-actions>

            <v-btn
              v-if="task.status == 'Active'"
              @click="onChangeStatus(task.id, 'Completed')"
            >
              Complete Task
            </v-btn>

            <v-btn
              v-if="task.status == 'Completed'"
              @click="onChangeStatus(task.id, 'Active')"
            >
              Incomplete Task
            </v-btn>

            <v-btn
                v-if="task.status == 'Active'"
              @click="onChangeStatus(task.id, 'Postponed')"
            >
              Postpone Task
            </v-btn>

            <v-btn
              v-if="task.status == 'Postponed'"
              @click="onChangeStatus(task.id, 'Active')"
            >
              Activate Task
            </v-btn>

          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import { mapState } from 'vuex'

export default {
  async fetch({store, route}) {
    await store.dispatch('tasks/getMyTasks', {
      sid: route.params.sid
    })
  },
  methods: {
    onChangeStatus(taskId, status) {
      this.$store.commit('tasks/changeTaskStatus', {
        taskId: taskId,
        status: status,
      })
    }
  },
  computed: {
    ...mapState({
      myTasks: state => state.tasks.myTasks
    })
  }
}

我真的不想每次用户登陆页面时都重新加载页面，因为这违背了SSR和SPA的目的

如果您可以选择您的大脑，请在Github上签出回购协议，并按照上述步骤操作：

---

您没有在任务存储中定义状态。 店内/tasks.js

export const store = () => ({
  myTasks: []
})

虽然它应该是

export const state = () => ({
  myTasks: []
})

---

我可以看到的主要区别是，在导航到

/tasks

时，

tasks.json

的请求发生在客户端。当加载

/tasks

fresh时，请求发生在服务器端。在我注意到差异之前，我已经查看了您的两个比较！维奥拉，它就像一个符咒。。有趣的是，很多其他的事情现在也都是被动的（我本来打算放弃Nuxt，因为它不是标签上说的那样！）非常感谢！显然，花太多时间看同一件事会让你失明：）

export const state = () => ({
  myTasks: []
})