Состояние Vuex не реагирует без перезагрузки страницы - PullRequest
Новая
       39

Состояние Vuex не реагирует без перезагрузки страницы

1 голос
/ 08 октября 2019

При возникновении проблемы возникают следующие настройки: Simple Nuxt Intallation 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'к истине

Я поиграл с асинхронностью и жду, удалив их и добавив их в определенные места.

Я использовал $Функция 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
    })
  }
}

Мой магазин с пространством имен "задач": 

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

1 Ответ

1 голос
/ 09 октября 2019

Вы не определяете состояние в вашем хранилище задач. В store / tasks.js 

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

пока должно быть 

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