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

Posted 2023-02-22

【中文标题】VueJS - Vuex 状态更新时组件不更新

【英文标题】：VueJS - Components not updating when Vuex state updated

【发布时间】：2019-03-20 05:35:37

【问题描述】：

我有一个 vuex 商店，里面有一个名为“columnChoice”的项目。我有一个在文本框中更新它的组件，以及一个更新它并验证它是正整数的计算属性。然而，组件的计算属性并没有更新（根据开发工具），即使 vuex 存储肯定是更新（也根据开发工具）。

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

我已经尝试将计算设置从“...mapState([])”之一更改为这个设置，并且我还尝试了具有单独 set 和 get 函数的 v-model 设置。

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"

【问题讨论】：

你试过从计算属性中移除setter吗？

是的，同样的结果。在开发工具的 Vuex 部分，它显示了一个事件并且值发生了变化，但是当我转到开发工具的组件部分时，那里没有任何变化。

如何按预期使用mapState，即computed: ...mapState('columnChoice'), ，而不是使用返回this.$store.state.columnChoice？

其实我先试过了，也没用。这是 github 分支的链接，如果还有其他文件可能我在另一个文件中丢失了：github.com/Sacmanxman2/csv-subtractor/tree/dev

“计算的属性没有更新” ????那会是哪个计算属性？

【参考方案1】：

好吧，我想通了。结果在我的 index.html 文件中，除了使用从 NPM 导入的实例之外，我还一直从 CDN 获取 vue 实例