состояние действия асинхронной выборки vuex заполнено, если при использовании переменной в шаблоне ошибка не определена - PullRequest
Новая
       14

состояние действия асинхронной выборки vuex заполнено, если при использовании переменной в шаблоне ошибка не определена

0 голосов
/ 11 сентября 2018

У меня есть одно асинхронное действие vuex, я использую средства получения карт и функцию, созданную компонентом, для извлечения и заполнения данных, если я использую этот встроенный объект хранилища данных в консоли представления шаблона, ошибка отображения не определена, если я пытаюсь получить доступ к переменной только без встроенного объекта imполучая неопределенную ошибку для встроенного объекта, я думаю, что эта ошибка связана с тем, что асинхронная функция не блокирует основной компонент процесса полностью загруженным, а после заполнения асинхронной функции переменная

действия, состояние 

 // state
   export const state = {
    app: null
   }

   // getters
   export const getters = {
    app: state => state.app,
   }

   // mutations
   export const mutations = {
   [types.FETCH_APP_SUCCESS] (state, { app }) {
     state.app = app
   },

   [types.FETCH_APP_FAILURE] (state) {
    state.app = null
   },

   [types.UPDATE_APP] (state, { app }) {
     state.app = app
   }
   }
 async fetchApp ({ commit }) {
 try {
  const { data } = await axios.get('/api/app/1')
  commit(types.FETCH_APP_SUCCESS, { app: data })
 } catch (e) {
  commit(types.FETCH_APP_FAILURE)
 }
}

компонент 

<template>
 <div>
   {{app.name}}
 </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  middleware: 'auth',

created () {
  // i try here async and await
 this.$store.dispatch('app/fetchApp')
},

computed: mapGetters({
 app: 'app/app'
}),

metaInfo () {
 return { title: this.$t('home') }
}
}
</script>

состояние заполнено enter image description here

переменная может видеть в html enter image description here

, но утешает эту ошибку enter image description here

1 Ответ

0 голосов
/ 11 сентября 2018

app/app изначально null, и ваш шаблон не имеет проверки null на app.name, что приводит к появившейся ошибке. Вы можете условно визуализировать app.name в шаблоне: 

<template>
  <div>
    <template v-if="app">
      {{app.name}}
    </template>
  </div>
</template>

Или используйте пустую строку в качестве начального состояния app/app вместо null в вашем магазине.

...