Наблюдайте, как Vue.js хранит логическое изменение внутри компонента

Question

У меня есть хранилище vue.js, в котором хранится логическое значение, и мне нужно определить, когда это изменится внутри компонента. Когда userEnabled изменяется, мне нужно вызвать метод внутри компонента. Мне не нужно вычислять новое значение.

У меня вопрос, должен ли я использовать 'watch' для этого или есть более эффективный способ? Если да, должен ли я настраивать часы внутри «смонтированного» и как насчет unwatch?

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export const store = new Vuex.Store({
    state : {
        userEnabled: false,
    }
});

user.vue

<template>
    <div>
        <div id="user"></div>
    </div>
</template>
<script>
    export default {
        watch: {
            'this.$store.userEnabled': function() {
                console.log('test');
            }
        },
        mounted: function() {
            this.$store.watch( state => state.userEnabled, (newValue, oldValue) => {
                // call function!
            });
        }
    }
</script>

Answer 1

Если функциональность должна выполняться только внутри компонента, watch - это путь. Вы можете сопоставить userEnabled с вычисленной опорой компонента, чтобы улучшить читаемость, но это необязательно.

Ручной вызов $store.watch в mounted в основном дает возможность сохранить возвращенную функцию unwatch и прекратить наблюдение за свойством в произвольной точке. Однако, если вы хотите наблюдать за свойством, пока компонент все равно существует, это не дает никаких преимуществ.

Наконец, если требуемая функциональность должна запускаться всякий раз, когда изменяется userEnabled, независимо от конкретных компонентов, обрабатывающих это изменение, лучшим подходом может быть перемещение этого кода в функцию мутации Vuex, которая изменяет значение userEnabled в магазин.