时间戳

首页 > 解决方案 > 计算值更改时组件不重新渲染

javascript - 计算值更改时组件不重新渲染

问题描述

当计算值发生变化时，我PreviewExerciseItem不会重新渲染。计算的值是我的 vuex 商店中的一个 getter。

我没有改变我的 vuex 状态，我设置了一个新对象。这是我的突变：

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

吸气剂：selectedWorkout: (state) => state.selectedWorkout,

这是我的组件。PreviewExerciseItem当我的 selectedWorkout 更改但h1about 正在正确更新时，该组件不会重新呈现

<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)哪个也不起作用。

标签： javascriptvue.jsvuex

解决方案

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

深度克隆

推荐阅读