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: Почему DOM не обновляется?

В большинстве случаев при изменении данных экземпляра Vue представление обновляется.Но есть два крайних случая:

1. Когда вы добавляете новое свойство, которого не было при наблюдении данных.

2. КогдаВы модифицируете массив, непосредственно устанавливая индекс (например, arr [0] = val) или изменяя его свойство длины.

Если вы изменяете данные портов, выполняя что-то вродеэто:

this.ports[0] = 1234;

или что-то вроде этого:

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

Тогда Vue не сможет обнаружить, что произошло изменение,Вы можете обойти эту ловушку, выполнив:

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