Vuex 개체를 비울 때 Vue 프로젝트에서 정의되지 않은 오류를 방지하려면 어떻게 해야 합니까?

Vuex 개체를 비울 때 Vue 프로젝트에서 정의되지 않은 오류를 방지하려면 어떻게 해야 합니까?

예.나는 가지고 있다user템플릿에서 다음과 같이 사용하는 Vuex 데이터:

// Inside <template>
<button
  v-if="!user.expiredInfo.isExpired"
</button>

// Inside <script>
data () {
 return {
   disable: this.user.expiredInfo.isExpired ? 'text-muted' : '',
 }
}

다음과 같은 작업을 수행할 수 있습니다.

const state = {
  user: {}
}

async logout ({ commit }) {
  commit('SET_USER', {})
},

로그아웃 시 오류가 발생합니다.

TypeError: Cannot read property 'isExpired' of undefined

어떻게 하면 이런 문제를 예방할 수 있을까요?

설정해야 합니다.user빈 개체로 이러한 오류를 회피하는 대신 로그인한 사용자가 없을 때 null로 만듭니다.즉, 사용자가 템플릿에서 (존재하지 않을 가능성이 있는) 사용자 개체에서 일부 데이터를 렌더링하는 특정 시점에서 실제로 로그인하지 않을 수 있다는 사실을 항상 고려해야 합니다.

이러한 에러를 회피하려면 , 다음과 같은 조작을 실행할 수 있습니다(원하는 로직에 따라 다릅니다).

<button v-if="user && !user.expiredInfo.isExpired"></button>
<button v-if="!user || !user.expiredInfo.isExpired"></button>

로그인 고유의 템플릿이 많은 경우는 다음과 같습니다.

<template v-if="user">
  <!-- It's safe to access properties of the user object anywhere in here -->
</template>

라고는 생각하지 말아 주세요.this.user는 항상 비변수입니다(강제된 불변수가 아닌 경우).

언급URL : https://stackoverflow.com/questions/45051032/how-to-avoid-the-undefined-errors-in-vue-projects-when-you-empty-vuex-objects