对于a子手游戏，我有一个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似乎没有反应，为什么？