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

Question

我有一个保存布尔值的 vue.js 存储，我需要检测它何时在组件内发生变化。当 userEnabled 更改时，我需要调用组件内的方法。我不需要计算新值。

我的问题是我应该为此使用 'watch' 还是有更有效的方法？如果是这样，我是否应该在“已安装”中配置手表，而取消手表呢？

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 映射到组件的计算属性以提高可读性，但这是可选的。

在mounted 中手动调用$store.watch 主要为您提供了存储返回的unwatch 函数并在任意点停止观察属性的选项。但是，如果您想在组件存在的情况下查看该属性，那么这不会带来任何好处。

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