设置 Vuex 数据之前的 Vue 组件加载

Question

我有一个 Vue2 组件，它依赖于 Vuex 来检索当前选定的节点 (infoNode)，以便向用户显示该节点的数据。我有一个 beforeCreate 函数，它使用 Axios 检索顶级节点并将 'infoNode' 设置为第一个节点，如下所示：

  async beforeCreate(){
    const info = await axios.get('/ajax/company-info')
    if(info.data){
      this.$store.dispatch("setCompanyInfo", info.data)
    }

// Function to retrieve top level node
    const topLevel = await axios.get('/ajax/get-root-contents')
    if(topLevel.data){
      this.$store.dispatch("loadTopLevel", topLevel.data)
    }
  },

下面是设置infoNode的Vuex函数

loadTopLevel(state,node){
      state.infoNode = node
    },

这是我尝试获取 infoNode 数据并显示有效图标数组中的图标的地方

<v-icon size="6em" v-if="fileIcons[infoNode.data.filetype]">{{ fileIcons[infoNode.data.filetype] }}</v-icon>

现在，在我的组件中，我有一个计算道具，它从商店中检索此 infoNode 以供显示。我遇到的问题是前端抛出一个错误，指出 'e.infoNode.Data' 未定义'。

在请求完成之前抛出此错误。请求完成后，由于商店已更新，前端成功显示了 infoNode。

有没有办法让我在组件尝试抓取之前在商店中设置这些数据？我已经尝试了很多 beforeCreate 的变体（异步和非）以及 created/mounted.

Answer 1

在您的情况下，beforeCreate() 是异步的，因此组件在您设置要存储的数据之前呈现。如果 fileIcons 具有特定条目 (infoNode.data.filetype)，您将显示 v-icon，但此时 infoNode 是 undefined 或 infoNode.data 未定义。

在 v-if 中，您应该检查 infoNode 是否未定义并且是否有您正在搜索的条目。

像这样：

computed: {
  hasEntry() {
    if(infoNode && ('data' in infoNode)) return true

    return false
  }
}

//template
<v-icon size="6em" v-if="hasEntry">{{ fileIcons[infoNode.data.filetype] }}</v-icon>

设置 Vuex 数据之前的 Vue 组件加载

Vue Component Loading Before Vuex Data Is Set

javascript

vue.js

vuex