Vue.js가 컴포넌트 내부에 부울 변경을 저장합니다.

Vue.js가 컴포넌트 내부에 부울 변경을 저장합니다.

vue.js 스토어에 부울값이 저장되어 있는데 컴포넌트 내부에서 이 값이 변경되는 것을 검출해야 합니다.userEnabled가 변경되면 컴포넌트 내의 메서드를 호출해야 합니다.새로운 값을 계산할 필요가 없습니다.

질문입니다만, 'watch'를 사용해야 합니까?아니면 좀 더 효율적인 방법이 있을까요?그렇다면 시계를 '마운트'로 설정해야 하며, 언패치는 어떻게 해야 합니까?

store.displaces를 설정합니다.

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>

기능이 컴포넌트 내부에서만 실행되는 경우,watch가는 길이에요.지도도 만들 수 있고userEnabled컴포넌트의 컴퓨터 소품으로 이행하여 가독성을 향상시킵니다.단, 옵션입니다.

수동 호출$store.watch에mounted는 주로 반환된 패치 해제 함수를 저장하고 임의의 시점에서 속성 감시를 중지할 수 있는 옵션을 제공합니다.그러나 구성 요소가 존재하는 동안 속성을 감시하려는 경우 아무런 이점도 추가되지 않습니다.

마지막으로 원하는 기능을 언제든지 실행해야 하는지 여부userEnabled변경을 처리하는 특정 컴포넌트에 관계없이 그 코드를 Vuex 변환 함수로 이동하여 값을 변경하는 것이 더 나을 수 있습니다.userEnabled가게 안에서.

언급URL : https://stackoverflow.com/questions/52135465/observe-vue-js-store-boolean-change-inside-component