javascript - 具有来自firebase可调用函数（gaxios）的异步状态值的Vuex getter

Question

我使用了几种技术的组合：Vue、Vuex、Vuetify、Google Firebase 可调用函数。此代码工作正常，并在使用我自己的 firebase 可调用函数getBatchData()异步加载数据后更新组件，但在从 firebase 接收数据之前，它会在控制台中显示错误：

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘位置’”

我的问题是下一个 -如何在异步加载实际数据之前显示一些值？

//Vuex 动作（actions.js 文件）：

import * as EVENT from './mutation-types.js';
import firebase from "firebase/app";
const getBatchData = firebase.functions().httpsCallable('getBatchData');


function convertProjectSummary(values) {

  let projects = [];
  const projectNameCol = 0;
  const locationCol = 1;

  const len = values.length;
  for (var i = 1; i < len; i++) {
    let record = {};
    record.project = values[i][projectNameCol];
    record.location = values[i][locationCol];
    projects.push(record);
  }
  return projects;
}

const actions = {
  updateBatchData: (context) => {
    context.commit(EVENT.SET_LOADING, {loading: true});

    getBatchData().then(resp => {

      let projectSummaryArray = [];
      let projectSummarySheetName = 'Project Summary';

      //separation ranges:
      const valueRanges = JSON.parse(resp.data);
      for (var i = 0; i < valueRanges.length; i++) {
        if (range.includes(projectSummarySheetName)) {
          projectSummaryArray = valueRanges[i].values;
          continue;
        };
      };
      let projectSummaryRecords = convertProjectSummary(projectSummaryArray);
      //=> state.projectRecords:[],
      context.commit(EVENT.UPDATE_PROJECT_SUMMARY, {projectRecords: projectSummaryRecords}); 
      context.commit(EVENT.SET_LOADING, {loading: false});

    }).catch(error => console.log(error))
  }
}
export default actions

//Vuex getter（getters.js 文件）：

const getters = {      
  //getter function with parameter:
  getProjectInfo: state => {
    const records = state.projectRecords;

    function searchProjectDate(projectName) {
      if (records.length > 0) {
        for(var i=0; i<records.length; i++) {
          if(records[i].project == projectName) {
            return records[i];
          }
        }
      } /* not updated if use the next default value:
      else {
        return {
          project: "data not available",
          location: "data not available",
        };
      }
      */
    }

    //return a closure function
    return searchProjectDate;
  },
}
export default getters

//Vue projectInfo.vue 文件：

<template>
<!-- asynchronous computed value -->
  <div><p :text="info.location"></p></div>
</template>
<script>
import { mapState, mapGetters} from "vuex";
export default {
  name: "prj-info",
  computed: {
    ...mapState(["currentProject"]),
    ...mapGetters(["getProjectInfo"]),
    info() {
      //getter function with parameter:
      return this.getProjectInfo(this.currentProject);
    }
  }
}
</script>

我的错：相反，我提供的代码使用了一个子组件，但其中有一个错误：

<template>
  <!-- asynchronous computed value -->
  <div><GreyTextField :text="summary && summary.location" /></div>
</template>

<template>
  <div class="grey-textfield">
    {{theText}}
  </div>
</template>

<script>
export default {
  name: "grey-textfield",
  props: {
    text: {
      type: String,
      default: "Text"
    },
  },
  data() {
    return {
      theText: this.text
    }
  },
  watch: {
    text: function(val, oldVal) {
      this.theText = val;
    },
  },
}
</script>

我为文本属性添加了观察者。现在它可以工作了。对不起。有时共享代码以查找错误是件好事。

标签： javascriptfirebasevue.jsgoogle-cloud-functionsvuex