Vue.js 返回状态变量的计算属性不是被动的

对于hangman游戏，我有一个Word.vue组件，其中我试图初始化一个名为WordTogueSasarray的数组，其中包含n个空项目n=Word中要猜测的字母数：

<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>

我的问题如下。在my Keyboard.vue组件中，当用户选择确实属于单词的字母进行猜测时，我会更新我的状态，因此：

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

我希望此变异会更新我的word.vue组件中的单词：

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

但事实并非如此。WordTogueSasarray似乎没有反应，为什么？

这是因为state.WordTogueSasarray[value.i]=value.letter没有反应。 因为Vue.js只监视数组方法，如push或splice

您需要这样做。$setstate.wordToGuessAsArray，value.i，value.letter

或在Vuex中： Vue.setstate.WordTogueSasarray，value.i，value.letter；并在文件中导入Vue

请在此处阅读更多信息：

---

谢谢，但是我可以在商店里做这个吗？我明白了。$set不是函数错误

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