Question

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

我的问题是我应该使用“手表” 还是有更有效的方法？如果是这样，我应该在“已安装”状态下配置手表吗？如何取消手表呢？

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主要是使您可以选择存储返回的取消监视功能并在任意点停止监视属性。但是，如果您想一直监视该属性，只要该组件仍然存在，就没有任何好处。

最后，如果无论何时userEnabled发生更改时都应运行所需的功能，而不管处理更改的特定组件如何，那么更好的方法可能是将该代码移至Vuex变异函数中，该函数会更改{{ 1}}。

观察Vue.js在组件内部存储布尔更改

1 个答案: