Question

遇到问题需要进行以下设置：简单Nuxt安装v2 ^ 使用Vuetify和Axios

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

如果无法实现此功能，我无法弄清楚如何使用此应用程序。我最初的想法是可能是Nuxt / Vue的错误-但是我希望有人可以告诉我我错了！

似乎很简单？！好吧，7天后，我距离解决这个我遇到的小错误已经很近了……

为了便于访问，我加载了一个简单的github演示，演示了仅用3个步骤即可重现错误的问题。

https://github.com/BarryJamez/not-so-reactive-app.git

步骤：一旦运行'npm run dev'-如下：

步骤1：从索引页面（http://localhost:3000）开始

第2步：点击“查看任务”

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

第4步：现在刷新页面，然后突然生效。

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

我尝试了很多事情，但是没有一个起作用：

** 1。我已将包含注释列表的整个子组件移到父组件中，以消除传递道具的麻烦。

我使用了Vue.set和array.splice，而不仅仅是使用索引替换了数组项
我在这些计算数组上启用了观察程序，并将'deep'设置为true
我玩过async并等待，方法是将它们删除并添加到某些位置。
我已经使用$ nextTick函数查看它是否是渲染问题
我已将数组置于其自己的父级状态属性中（尽管数组中子元素中的postId字段）-但是我还可以如何在状态中包含对象-对象必须具有“子级” '元素。
我引用了父组件的计算属性，而不是子组件中的props。**

“我的页面”中的任务：

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

我的商店使用命名空间的“任务”：

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

export const mutations = {
  setMyTasks: (state, tasks) => {
    state.myTasks = tasks
  },
  changeTaskStatus: (state, params) => {
    let index = state.myTasks.findIndex(el => {
      return el.id == params.taskId
    })
    state.myTasks[index].status = params.status
  }
}

export const actions = {
  async getMyTasks (vuexContext, params) {
    try {
      let {data} = await this.$axios.$get('/tasks.json')
      vuexContext.commit('setMyTasks', data)
    } catch (e) {
      console.log(e)
    }
  }
}

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

如果您可以选择您的大脑，请在Github上查看存储库，然后按照上述步骤操作： https://github.com/BarryJamez/not-so-reactive-app.git

Answer 1

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

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

应该是

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

不重新加载页面时Vuex状态无法响应

1 个答案: