计算属性返回状态变量不是反应性的答案

【问题标题】：Computed property returning state variable isn't reactive计算属性返回状态变量不是反应性的
【发布时间】：2020-03-02 06:58:53
【问题描述】：

对于一个刽子手游戏，我有一个 Word.vue 组件，我试图在其中初始化一个名为 wordToGuessAsArray 的数组，其中包含 n 个空项目（n = number要猜测的单词中的字母）：

<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 似乎没有反应，为什么？

【问题讨论】：

标签： vue.js vuex vue-reactivity

【解决方案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。

Vuejs and Vue.set(), update array

【讨论】：

谢谢，但是我可以在商店里做这个吗？我收到this.$set is not a function 错误