페이지를 새로고침하지 않으면 Vuex 상태가 반응하지 않음

페이지를 새로고침하지 않으면 Vuex 상태가 반응하지 않음

이 문제에는 Vuetify 및 Axios를 사용한 심플 Nuxt Intallation v2^ 설정이 포함됩니다.

저는 이미 실제 백엔드를 사용하여 많은 추가 기능을 갖춘 고급 앱을 구축했습니다만, Nuxt의 단순한 신규 설치에서 오류를 재현하여 여러분들을 위한 레포(repo)를 만들기로 결정했습니다.따라서 이 데모의 기능은 명확하지 않을 수 있지만 실제 상황에서는 앱이 태스크와 프로젝트를 사용하고 있습니다.사용자는 각 작업의 상태를 변경할 수 있어야 합니다.

이 기능을 실장할 수 없으면 이 앱으로 어떻게 더 나아가야 할지 모르겠습니다.제 첫 번째 생각은 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. 소품 통과가 문제가 되지 않도록 코멘트 목록을 포함하는 전체 자녀 구성 요소를 부모 구성 요소로 옮겼습니다.

2. 어레이 항목을 인덱스로 대체하는 대신 Vue.set 및 array.splice를 사용했습니다.

3. 계산된 어레이에서 워처를 활성화하고 'deep'를 true로 설정했습니다.

4. 비동기식으로 장난을 치고, 그것들을 제거하고 특정 장소에 추가하면서 기다린다.

5. $nextTick 함수를 사용하여 렌더링 문제인지 확인했습니다.

6. 어레이를 자신의 부모 수준 상태 속성(어레이의 하위 요소의 postId 필드에도 해당)에 배치했습니다.그 이외의 상태에서는 개체를 포함할 수 없습니다.개체에는 '자' 요소가 필요합니다.

7. 하위 구성요소의 소품 대신 상위 구성요소의 계산된 속성을 참조했습니다.**

태스크가 있는 마이 페이지:

<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에서 repo를 체크하고 위의 단계를 따르십시오.https://github.com/BarryJamez/not-so-reactive-app.git

작업 저장소에서 상태를 정의하고 있지 않습니다.매장/태스크.js

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

그래야 할 때

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

언급URL : https://stackoverflow.com/questions/58278144/vuex-state-not-reactive-without-page-reload