Обновить состояние по умолчанию на основе свойства - PullRequest
Новая
       46

Обновить состояние по умолчанию на основе свойства

0 голосов
/ 11 апреля 2020

Я работаю над компонентом кнопки, который также получает значение состояния по умолчанию. 

export default {
    props: {
        defaultState: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            currentState: this.defaultState
        }
    },

    computed: {
        isActive() {
            return this.currentState;
        },
    }
    ...
}

И я могу использовать его как <button :defaultState="true"/>.

Теперь проблема в том, что когда я пытаюсь написать тест для своего компонента, я всегда получаю значение false (значение по умолчанию) currentState после использования wrapper.setProps({ defaultState: true }), которое должно быть true 

it.only ('should work with dynamic state change', async () => {

    wrapper.setProps({
        defaultState: true
    });

    await wrapper.vm.$nextTick();

    // shows the true
    console.log( wrapper.vm.defaultState );

    // should be true but i get false 
    console.log( wrapper.vm.currentState );
});

Может кто-нибудь указать мне правильное направление и то, что я пропустил?

1 Ответ

1 голос
/ 11 апреля 2020

лучшее решение для этого - создать вычисляемое свойство. Это устранит необходимость как в свойстве data, так и в наблюдателе: 

export default {
    props: { 
        defaultState: {
            type: Boolean,
            default: false
        }
    },

    computed: {
        currentState() {
            return this.defaultState
        }
    }
}

Однако, если ваш компонент такой простой, вычисленное свойство currentValue вообще не нужно! Потому что все это повторяет значение defaultState проп, которое само по себе уже реактивно.

Таким образом, это означает, что вы добавляете сложность к компоненту просто для того, чтобы он работал для тестов ... и компонент будет работать отлично, даже если у вас его нет.

...