Vue商店竞争条件-第二个组件试图在第一个组件将数据放入商店之前显示数据

Question

我有两个组成部分：First.vue和Second.vue

• First.vue在created()上计算一些数据并将其存储
• Second.vue通过computed显示来自商店的数据，但得到：Cannot read property "total" of undefined

First.vue

created() {
  fetchHddInfo().then(info => {
     this.$store.commit('updateMountedDrives', info)
  })}
}

Second.vue

数据{{freeSize}}显示在页面上，但是我第一次得到Cannot read property "total" of undefined的计算结果是尝试从存储中获取数据（在数据从First.vue到达之前）。

{{freeSize}}

...

computed: {
  freeSize () {
    return this.$store.state.AppData.mountedDrives.total.free
  }
}

AppData.js存储模块

mountedDrives存储什么数据的示例：

{"total": { "free": 201136054272, "size": 2114488328192 }}

const state = {
  mountedDrives: []
}

const mutations = {
    updateMountedDrives (state, value) {
        state.mountedDrives = value
    }
}