Question

我在州内有一家vuex商店，里面有一个叫做“ columnChoice”的项目。我有一个在文本框中更新它的组件，以及一个更新它并验证它是正整数的计算属性。但是，即使vuex存储肯定是（根据开发工具），该组件的计算属性也不会更新（根据开发工具）。

这是代码，我删除了其他不相关的方法/值，但是如果似乎缺少某些内容，请告诉我。

我尝试将计算的设置从“ ... 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实例

VueJS-Vuex状态更新时组件未更新

1 个答案: