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