javascript - Vue.js vuex Prop 不会重新渲染

我正在使用Vuex并显示如下数据：

<template>
    <div>
        <div>
            <div v-for="port in ports">
                <port :port="port"></port>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        computed: {
            ...mapState({
                ports: state => state.ports.ports,
            })
        }
    }
</script>

我现在遇到的问题是，当我在另一个组件中更改ports state时，它会正确更新ports state，但是v-for循环中的端口未更新。

如何确保端口组件rerenders中的数据也正确？

最佳答案

Vue Beginner Gotchas: Why isn't the DOM updating?


  大多数情况下，当您更改Vue实例的数据时，视图就会更新。但是有两种情况：
  
  
  当您添加观察数据时不存在的新属性时。
  通过直接设置索引（例如arr [0] = val）或修改其length属性来修改Array时。
  


如果要通过以下操作更改端口数据：

this.ports[0] = 1234;

或类似这样的东西：

this.ports[4].property = 'some value';

这样，Vue将无法检测到发生了更改。您可以通过以下方法解决此陷阱：

Vue.set(this.ports, 0, 1234);

关于javascript - Vue.js vuex Prop 不会重新渲染，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52681703/