VueJS - Компоненты не обновляются при обновлении состояния Vuex

Question

У меня есть хранилище vuex с элементом «columnChoice» внутри штата.У меня есть компонент, который обновляет его в текстовом поле, и вычисляемое свойство, которое обновляет его и проверяет, что это положительное целое число.Однако вычисленные свойства компонента не обновляются (в соответствии с инструментами dev), даже если хранилище vuex определенно (также в соответствии с инструментами dev).

Вот код, я удалил другойметоды / значения, которые не имеют отношения, но если кажется, что чего-то не хватает, дайте мне знать.

Я попытался изменить вычисленную настройку с "... mapState ([])" на эту, и я также попробовал установку v-модели с отдельными функциями set и get.

хранилище Vuex index.js :

import Vuex from 'vuex'

export default new Vuex.Store({
  state: {
    columnChoice: 1,
    processingStatus: 0,
    columnError: 0
  },
  mutations : {
    resetVars(state) {
      state.processingStatus = 0
      state.columnError = 0
      state.columnChoice = 1
    },

    setProcessingStatus(state, v) {
      state.processingStatus = v
    },

    columnError(state) {
      state.columnError = 1
    },
    columnGood(state) {
      state.columnError = 0
    },
    columnSet(state, v) {
      state.columnChoice = v
    }
  }
})

Компонент:

<template>
  <div class="row p-2">
    <div class="col-2">Column in reference file</div>
    <div class="col-10"><input type=text size=3 :value="columnChoice" @change="verifyColumn" id="columnChoice"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ColumnChoice',
  computed: {
    ...mapState([
      'columnChoice'
    ]),
  },
  methods: {
    verifyColumn(e) {
      if (isNaN(e.target.value) || e.target.value < 1) {
        this.$store.commit('columnError')
        this.$store.commit('columnSet', e.target.value)
      } else {
        this.$store.commit('columnGood')
        this.$store.commit('columnSet', e.target.value)
      }
    },
  }
}
</script>

Кроме того, после изменения значения 5 в текстовом поле и выбора этого компонента в инструментах разработки (присвоение ему $ vm0) я получаю следующее, показывая, что состояние действительно обновляется и доступно черезкомпонента, но вычисляемое свойство просто не обновляется:

$vm0.$store.state.columnChoice
> "5"
$vm0._computedWatchers.columnChoice.value
> "1"

Answer 1

Хорошо, я понял это.Оказывается, в моем файле index.html я извлекал экземпляр vue из CDN в дополнение к использованию файла, импортированного из NPM