Vue mapState 비반응

Vue mapState 비반응

mapState 함수를 사용하여 스토어에서 상태를 가져오려고 하는데 템플릿 코드로 값을 반환하는 생성된 코드를 사용할 수 없습니다.

<template>
         // Some code
                <template v-if="!isLoggedIn">
                    // Some code
                </template>
                <template v-else>
                    // Some code
                    {{ currentUser.name }} 
                </template>

        // Some code
</template>

<script>
    import { mapState } from "vuex";

    export default {
        // Some code
        computed: {
          ...mapState({auth : ['currentUser', 'isLoggedIn','customers']})
        }
    }
</script>

대신 다음과 같은 코드 작업

<script>
    import { mapState } from "vuex";

    export default {
        // Some code
        computed: {
          currentUser() {
                return this.$store.state.auth.currentUser
            },
            isLoggedIn() {
                return this.$store.state.auth.isLoggedIn
            },
        }
    }
</script>

경고 메시지

[Vue warn] :속성 또는 메서드 "isLoggedIn"은 인스턴스에서 정의되지 않지만 렌더링 중에 참조됩니다.속성을 초기화하여 데이터 옵션 또는 클래스 기반 구성 요소에서 이 속성이 반응하는지 확인하십시오.https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 를 참조해 주세요.

잘 부탁드립니다

비루트 속성에 액세스하기 위한 올바른 구문은 다음과 같습니다(화살표 기능을 사용).

computed: {
...mapState({
  currentUser: state => state.auth.currentUser,
  isLoggedIn: state => state.auth.isLoggedIn,
  customers: state => state.auth.customers
})}

메뉴얼을 확인해 주세요.

namesleded vuex 모듈에서 값에 액세스하려는 경우:auth첫 번째 인수로 모듈 이름을 전달하고 두 번째 인수로 매핑할 값의 배열을 전달합니다.

computed: {
    ...mapState('auth', ['currentUser', 'isLoggedIn','customers'])
}

mapState 모듈을 지정한 후 다음과 같이 사용할 수 있습니다.this.auth.isLoggedin

언급URL : https://stackoverflow.com/questions/51391256/vue-mapstate-non-reactive