Question

计算值更改时，我的PreviewExerciseItem不会重新呈现。计算出的值是我的vuex商店中的吸气剂。

我不改变我的vuex状态，而是设置了一个新对象。这是我的变异：

selectedWorkout: (state, workout) => {
  state.selectedWorkout = {...workout};
}

字母：selectedWorkout: (state) => state.selectedWorkout,

这是我的组成部分。当我的selectedWorkout更改但PreviewExerciseItem正确更新时，h1组件不会重新呈现

<template>
    <div v-if="selectedWorkout">
        <h1 v-if="selectedWorkout">{{selectedWorkout.exercises[1].progression}}</h1>
        <PreviewExerciseItem v-for="(exercise, index) in selectedWorkout.exercises" :key="exercise.presetKey" 
            :exercise="exercise" :index="index" :selected="selectedExercise === index"
            v-on:click.native="selectedExercise = index"/>

    </div>
</template>

<script>

import db from '@/api/db'
import { mapGetters, mapActions, mapState } from "vuex";
import PreviewExerciseItem from "@/components/PreviewExerciseItem.vue"


export default {
    components: {
        PreviewExerciseItem
    },
    async asyncData({ store, params }) {
        await store.dispatch('selectedRoutine', params.id);
        return { routineId: params.id }
    },
    computed: {
        ...mapGetters(['user', 'selectedRoutine', 'selectedWorkout']),
    },
    watch: {
        user: async function (user) {
            const status = await db.fetchRoutineStatus(user.uid, this.routineId);
            this.$store.dispatch('selectedWorkout', status);
            console.log('Workout1', this.selectedWorkout) // Logs correctly updated Object
        },
        selectedWorkout: function (selectedWorkout) {
            this.workout = {...selectedWorkout};
            console.log('Workout2', this.selectedWorkout) // Also updated object
            this.$forceUpdate();    // Not doing anything
        }
    },
}
</script>

编辑：问题可能出在我的突变上。当我使用state.selectedWorkout = JSON.parse(JSON.stringify(workout));而不是state.selectedWorkout = {...workout};时，它可以工作。我以为state.selectedWorkout = {...workout};会分配一个新的对象，但似乎没有。我不太喜欢JSON解决方案，是否有更好的方法来分配新的Objet？我还尝试了state.selectedWorkout = Object.assign({}, workout)也不起作用。

Answer 1

您需要使用此表单JSON.parse(JSON.stringify(workout));来深克隆workout对象。

Deep Clone

计算值更改时，组件不会重新呈现

1 个答案: