Vue - 通过传递来自父母的道具来失去孩子的反应性，这取决于 state

Question

在我的代码中，我从 state 中成功删除了一个“练习”object，但它没有在组件上被删除。 父组件从 state 中获取数据，并将“练习”数组传递给可以删除的子组件。

Index passes the exercises as selectedRoutine to RoutinePanel

<v-row v-else justify="center">
  <v-col cols="12" sm="9" md="7" class="text-center">
    <RoutinePanel
      :selected-day="selectedDay"
      :selected-routine="selectedRoutine"
    />
  </v-col>
</v-row>

Then RoutinePanel passe each exercise as a prop to HorizontalExercises

<div v-for="exercise in selectedRoutine" :key="exercise.name">
  <HorizontalExercises :exercise="exercise" :selected-day="selectedDay" />
</div>

HorizontalExercises

export default {
  props: {
    exercise: {
      type: Object,
      default: () => {
        return {
          name: 'Exercise',
          sets: 0,
          reps: 0,
          weight: 0,
          id: 0,
        }
      },
    },
    selectedDay: {
      type: String,
      default: () => {
        return ''
      },
    },
  },

在 HorizontalExercises 中，我有一个 function 成功地从 state 中删除了练习，但我无法让它从组件道具中消失，因此它不会呈现。 只有当我重新渲染 RoutinePanel 组件时它才会消失。

state 看起来像这样：

  routines: [
    {
      day: 'monday',
      exercises: [
        {
          name: 'bicycle',
          duration: '5 min',
          id: 0,
        },
    ]

这是使用的突变：

deleteExercise(state, payload) {
  const routineIndex = state.routines.findIndex(
    (routine) => routine.day === payload.day
  )
  const exerciseIndex = state.routines[routineIndex].exercises.findIndex(
    (exercise) => exercise.id === payload.id
  )
  state.routines[routineIndex].exercises.splice(exerciseIndex, 1)
},

我正在考虑让所有东西都依赖于 state 并且不传递道具可能会起作用。

对不起，也许有点令人困惑，这是我的第一个问题。

Answer 1

我想也许你正试图从 state 传递值:selected-routine="selectedRoutine"如果你的变量是从this.$store.state.selectedRoutines传递的，它可能不起作用（它对我来说不是反应性的）。

如果是这样，请尝试改用getters 。 https://vuex.vuejs.org/guide/getters.html

您可以在您的数据中 map 并将它们作为道具传递，它在我的项目中是被动的。 然后你可以在你的computed属性中 map 你的吸气剂。 https://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper