Javascript Vue.js vuex道具不'；重排机

我正在使用

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>

从“vuex”导入{mapState}；
导出默认值{
计算：{
…地图状态({
端口：state=>state.ports.ports，
})
}
}

我现在遇到的问题是，当我在另一个组件中更改

端口状态时，它会正确更新
端口状态
，但
v-for
循环中的端口不会更新

如何确保端口组件
重新加载程序中的数据也正确无误？

大多数情况下，更改Vue实例的数据时，视图会更新。但有两种情况：

添加观察数据时不存在的新属性时


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


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

<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>

this.port[0]=1234

或者像这样：

<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>

this.ports[4]。属性='some value'

然后Vue将无法检测到发生了更改。您可以通过以下操作绕过此陷阱：

Vue.set（this.ports，01234）
如何更新state.port？推捻接你真的有一个state.ports.ports，还是应该是state=>state.ports？好的，thx，所以现在我在做：
this.ports[0]=1234
还有其他方法可以重播吗？@Jenssen对如何绕过Vue的反应性gotchas提出了建议，我也会更新我的答案的。Thx你太棒了@Jenssen如果我的答案解决了您的问题，请单击灰色复选标记接受它，谢谢！