Vuex getter 반환이 정의되지 않음

Vuex getter 반환이 정의되지 않음

사이트 전체 데이터를 저장하기 위해 vex를 사용하는 vue 앱이 있습니다. 사용자 정보를 가져와 다음과 같은 라이프 사이클 방법을 만들기 전에 위의 상태로 둡니다.

const app = new Vue({
    el: '#app',
    store,
    beforeCreate(){
        store.dispatch('currentUser');
    }
});

사용자 모듈에는 다음과 같은 사용자 이름을 얻을 수 있는 getter가 있습니다.

const getters = {
    getName(state){
        return state.user.name;
    }
};

내 컴포넌트에서 getter에 접속하여 컴포넌트 내의 사용자 이름을 표시하려고 합니다.Vue Chrome 개발 도구를 살펴보면 getter가 정의되어 있지 않지만 콘솔 로그를 보면 getter 결과가 정의되어 있지 않다고 표시됩니다.

mounted(){
    console.log(store.getters.getName);
},

상태가 로드되기 전에 컴포넌트가 로드되고 있는 것 같습니다.악시스를 사용하여 사용자 정보를 얻고 있습니다.제가 알고 있는 바로 사용자 데이터를 얻기 위한 조치를 취할 수 없기 때문에 어떻게 해결해야 할지 매우 혼란스럽습니다.

getter 메서드로 다음을 수행할 경우:

state.user

알겠네.

{ "id": 1, "name": "Test" }

하지만 내가 이름을 얻으려고 할 때 나는 정의되지 않는다.

매장은 다음과 같습니다.

import axios from "axios/index";

const state = {
    user: {},
};

const mutations = {
    FETCH_USER(state,user){
        state.user = user;
    },
    UPDATE_AVATAR(state,avatar){
        state.user.avatar = avatar;
    }
};

const getters = {
    getName(state){
      return state.user.name
    },
    avatar(state){
        return state.user.avatar;
    },
    userSocialNetworks(state){
        //return state.user.social_networks
    },
    schoolName(state){
        return state.user.school
    },
    schoolAbout(state){
        return state.user.school.about
    },
    schoolAddress(state){
        return state.user.school.address
    }
};

const actions = {
    currentUser: ({commit}) => {
        axios.get('/api/user').then(response => {
            commit('FETCH_USER', response.data);
        });

    }
}

export default {
    state,
    getters,
    actions,
    mutations

}


 {"user":{"user":{"name":"Test","email":"test@test.edu","avatar":"http://www.gravatar.com/avatar/xxxx=300","city":null,"state":null,"zip":null,"address":null,"lat":null,"long":null,"role":"school","school":{"id":1,"about":null,"header":null,"name":"Test","user_id":1,"created_at":"2018-06-06 19:48:16","updated_at":"2018-06-06 19:48:16"},"following":[],"followers":[],"social_networks":[{"id":4,"user_id":1,"social_network_id":1,"network_url":"test.com/k","created_at":"2018-06-06 23:11:09","updated_at":"2018-06-06 23:15:19"},{"id":5,"user_id":1,"social_network_id":2,"network_url":"test.com/k","created_at":"2018-06-06 23:15:19","updated_at":"2018-06-06 23:15:19"},{"id":6,"user_id":1,"social_network_id":5,"network_url":"test.com/k","created_at":"2018-06-06 23:16:15","updated_at":"2018-06-06 23:16:15"}]}},"socialNetowrks":{"available_networks":[{"id":1,"network_name":"Facebook","created_at":null,"updated_at":null},{"id":2,"network_name":"Instagram","created_at":null,"updated_at":null},{"id":5,"network_name":"Twitter","created_at":null,"updated_at":null}]}}

여기에는 두 가지 큰 문제가 있습니다.

1. vuex 스토어에서 개체를 직접 업데이트하지 않으면 반응성이 저하됩니다.

따라서 모든 상태를 올바르게 선언하고 개체를 덮어쓰는 대신 개체에 할당해야 합니다.

import assignDeep from 'assign-deep'; //Since you have nested structure you will need this

const state = {
    user: {
       name: '',
       school: {
          about: '',
          address: '',
       },
       // Make sure all properties are defined
    },

};

const mutations = {
    FETCH_USER(state,user){
        assignDeep(state.user, user);
    },
    UPDATE_AVATAR(state,avatar){
        state.user.avatar = avatar;
    }
};

2. 상태에 비동기적으로 정의된 속성에 액세스하여 해당 속성을 동기화하여 사용하려고 합니다(존재하기 전).

먼저, 을 사용합니다.mapGetters사용하기 쉬운 vuex 유틸리티

import { mapGetters } from 'vuex';
//... In component definition
computed: {
  ...mapGetters({name: 'getName'})
}

이것은 vue 계산 속성이기 때문에 컴포넌트가 정의될 때 컴포넌트가 다시 렌더링되고 모든 것이 올바르게 표시될 것입니다.컴포넌트가 비어 있을 때 케이스를 처리했는지 확인하고 이 상태가 될 때까지 로드 화면을 표시하기만 하면 됩니다.

예를들면

<template>
  <div v-if="!name" class="loading"></div>
  <div v-else>{{name}}</div>
<template>

또한 속성이 업데이트될 때까지 기다릴 수도 있습니다.

마운트된 후크에서는 여전히 기본값이 되므로 사용하지 마십시오.

필요에 따라 워처 또는 계산된 속성을 사용합니다.

watch: {
  name: {
    handler(name, oldName) {
      if (name) {
        //Do something
      }
    },
    immediate: true
  }
}

우선, 메서드는 아직 초기화되지 않았습니다.beforeCreate훅. 이 문제를 해결하는 가장 쉬운 방법은created대신 후크:

const app = new Vue({
    el: '#app',
    store,
    created(){
        store.dispatch('currentUser'); // considering you have properly imported and exported vuex
    }
});

컴포넌트 내

import {mapGetters} from 'vuex';

export default {
  computed: {
    ...mapGetters(['getName'])
  }
}

데이터를 올바르게 초기화하려면 저장소의 특정 변수를 선언해 보십시오.

const state = {
    user: {
        name: '',
        avatar: '',
        school: '',
        ...
    },
};

내가 이걸 하기 전까지 난 네가 말한 것과 같은 문제를 안고 있었어.

다음과 같이 시험해 보십시오.

mounted() {
  setTimeout(() => {
    console.log(store.getters.getName);
  }, 400);
},

언급URL : https://stackoverflow.com/questions/50731429/vuex-getter-returns-undefined