Vue.js vuex 道具不会重新渲染

Question

我正在使用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中的数据也正确？

Answer 1

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

大多数时候，当您更改 Vue 实例的数据时，视图会更新。但是有两种极端情况：

1. 当您添加观察数据时不存在的新属性时。

2. 当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。

如果您通过执行以下操作更改端口数据：

this.ports[0] = 1234;

或者是这样的：

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

然后 Vue 将无法检测到发生了更改。您可以通过以下方式绕过这个陷阱：

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