Question

在我安装的i中调用axios来获取profile datail，然后如果成功我将有效负载发送到'set_account'vuex。

为了恢复这个数据，我在计算中使用了MapGetters（currentAccount）。

当您在控制台中恢复此数据ex：currentAccount.profile.name时，我收到：TypeError: Cannot read property 'name' of undefined

但我收到数据。为什么会出现这个错误？

App.vue

<template>
  <!-- Don't drop "q-app" class -->
  <div id="q-app">
    <q-layout ref="layout">
  <!-- Header -->
  <q-toolbar slot="header" v-if="this.$route.path !== '/'">
    <q-btn flat @click="$refs.layout.toggleLeft()">
      <q-icon name="menu" />
    </q-btn>
    <q-toolbar-title>
      Saúde Digital
      <span slot="subtitle">Meu Perfil</span>
    </q-toolbar-title>
  </q-toolbar>
  <!-- Left Side Panel -->
  <div slot="left">
    <q-list no-border link inset-separator>
      <q-list-header>
        Olá: {{currentAccount.profile.name}}.
        <q-icon name="sentiment_very_satisfied"/>
      </q-list-header>
      <q-side-link item to="/docs">
        <q-item-side icon="link" />
        <q-item-main label="Link" sublabel="Some menu link" />
      </q-side-link>
      <q-item @click="logout">
        <q-item-side icon="power_settings_new" />
        <q-item-main label="Logout" />
      </q-item>
    </q-list>
  </div>
  <!-- sub-routes get injected here: -->
  <router-view />
  <!-- Footer -->

</q-layout>
  </div>
</template>

<script>
import {http} from 'src/http/index'
import {mapGetters} from 'vuex'

export default {
  name: 'app',
  beforeMount () {
    this.getProfile()
  },
  computed: {
    ...mapGetters({
      showErros: 'getErrors',
      currentAccount: 'currentAccount'
    })
  },
  methods: {
    getProfile () {
      http.get('profile')
        .then(response => {
          this.$store.dispatch('set_account', response.data)
        })
        .catch(error => console.log(error))
    },
    // If not have localStorage token and path not "/" (login)
    // redirect to root (login)
    logout () {
      this.emptyLocalStorage()
      this.$store.dispatch('remove_user')
      this.$router.go('/')
    },
    emptyLocalStorage () {
      delete localStorage.token
    }
  }
}
</script>

Vuex商店：Auth.js

export default {
  state: {
    account: false,
    errors: false
  },

  getters: {
    currentAccount (state) {
      return state.account
    },
    getErrors (state) {
      return state.errors
    }
  },

  mutations: {
    LOAD_ERRORS (state, payload) {
      state.errors = payload
    },
    LOAD_ACCOUNT (state, payload) {
      state.account = payload
    },
    REMOVE_ACCOUNT (state, payload) {
      state.account = null
    }
  },

  actions: {
    set_errors ({commit}, payload) {
      commit('LOAD_ERRORS', payload)
    },
    set_account ({commit}, payload) {
      commit('LOAD_ACCOUNT', payload)
    },
    remove_account ({commit}) {
      commit('REMOVE_ACCOUNT')
    }
  }
}

Answer 1

因为在安装时没有人这样的物体。首先安装组件（没有人对象，显示错误），下一个Ajax被发送，下一个组件由vuex更新（现在你看到信息）。你在这里几乎没有选择来检查人物对象是否存在然后使用它还是以更好的方式 - 描述更好的默认状态对象。

无法读取未定义的Axios，Vuex的属性“名称”

1 个答案: