观察Vue.js存储组件内的布尔变化

Question

我有一个包含布尔值的vue.js商店，我需要检测组件内部何时发生变化。当userEnabled更改时，我需要调用组件内的方法。我不需要计算新值。

我的问题是，我应该使用“观察”还是更有效的方式？如果是这样，我应该在'mount'中配置手表，还有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映射到组件的计算prop以提高可读性，但这是可选的。

在$store.watch中手动调用mounted主要为您提供存储返回的unwatch功能并停止在任意点观看属性的选项。但是，如果您想要观察该属性，只要该组件存在，这就没有任何好处。

最后，如果在更改userEnabled时应运行所需的功能，无论处理更改的特定组件如何，更好的方法可能是将该代码移动到Vuex变异函数中，该函数会更改商店中userEnabled的值。