Переменная состояния, возвращающая вычисляемое свойство, не реагирует

Question

Для игры в палач у меня есть компонент Word.vue, в котором я пытаюсь инициализировать массив с именем wordToGuessAsArray, содержащий n пустых элементов ( n = количество букводним словом угадать):

<template>
  <section>
    <div v-for="(letter, i) in wordToGuessAsArray" :key="i">
    </div>
  </section>
</template>

<script>
export default {
  computed: {
    wordToGuessAsArray () {
      return this.$store.state.wordToGuessAsArray
    }
  },
  mounted () {
    const wordToGuess = 'strawberry'
    for (var i = 0; i < wordToGuess.length; i++) {
      this.$store.commit('SET_WORD_AS_ARRAY_PUSH')
    }
  }
}
</script>

Ниже приводится содержание моего store, относящегося к этому вопросу:

state: {
  wordToGuessAsArray: [],
},
mutations: {
  SET_WORD_AS_ARRAY_PUSH (state) {
    state.wordToGuessAsArray.push('')
  },
  SET_WORD_AS_ARRAY (state, value) {
    state.wordToGuessAsArray[value.i] = value.letter
  }
}

Моя проблема заключается в следующем. В моем Keyboard.vue компоненте, когда пользователь выбирает букву, которая действительно принадлежит слову «угадать», я обновляю свое состояние следующим образом:

this.$store.commit('SET_WORD_AS_ARRAY', { letter, i })

Я ожидаю, что эта мутация обновит слово в моем Word.vueкомпонент здесь:

<div v-for="(letter, i) in wordToGuessAsArray" :key="i">

Пока это не так. wordToGuessAsArray кажется нереактивным, почему?

Answer 1

Это потому, что state.wordToGuessAsArray[value.i] = value.letter не реагирует. Потому что Vue.js наблюдает только за методами массива, такими как push или splice.

. Вам нужно сделать this.$set(state.wordToGuessAsArray, value.i, value.letter);

или в Vuex: Vue.set(state.wordToGuessAsArray, value.i, value.letter); и импортировать Vue в свой файл.

Подробнее здесь:

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

Vuejs и Vue.set (), массив обновлений