VueJS-Vuex狀態更新時組件未更新

Question

我在州內有一家名為“ columnChoice”的項目的vuex商店。 我有一個在文本框中更新它的組件，以及一個更新它並驗證它是正整數的計算屬性。 但是，組件的計算屬性不會更新（根據dev工具），即使vuex存儲肯定是（根據dev工具）也是如此。

這是代碼，我刪除了其他不相關的方法/值，但是如果似乎缺少某些內容，請告訴我。

我嘗試將計算的設置從“ ... mapState（[]）”更改為這一設置，並且還嘗試了使用單獨的set和get函數進行v模型設置。

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文件中，除了使用從NPM導入的那個實例外，我還從CDN中獲取了一個vue實例。