Vue.js Vuex-何时从http服务器加载/初始化存储数据

我想在菜单栏中显示一些数据，这些数据需要远程获取（http get call）才能正确显示。当我的应用程序加载时，存储尚未初始化。我应该在哪里做

这就是我现在拥有的<代码>节点信息是一个空对象，只要不提取任何数据

导航组件

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    ...
      <div class="navbar-end">
        <span class="navbar-item">
          <div v-if="nodeInfo.latestSolidSubtangleMilestoneIndex">
            {{nodeInfo.latestSolidSubtangleMilestoneIndex}} / {{nodeInfo.latestMilestoneIndex}}
          </div>
          <div v-else>
            Node seems offline!
          </div>
        </span>
      </div>
    </div>
  </nav>
</template>

<script>
  import {mapGetters} from 'vuex';

  export default {
    name: 'Menu',
    computed: {
      ...mapGetters(['nodeInfo']) // Only the getters, no actions called to initialize them.
    }
  };
</script>

<style scoped>

</style>

---

这个名字目前没有多大意义。但是我需要从菜单组件的create（）方法调用“actions”吗？那会有点奇怪。如果我的商店能够在不需要触发的情况下自行进行初始http调用，那就太酷了。我甚至不知道如何从create（）部分调用这样的操作。

@Bert是对的。我将dispatch方法添加到组件的created（）方法中

export default {
    name: 'Menu',
    created() {
      this.$store.dispatch('fetchNodeInfo');
    },
...
}

---

请在此处查看vue.js生命周期图：并在此处阅读生命周期挂钩：。 它将大大帮助您了解何时何地添加stores dispatch方法

this.$store.dispatch（'fetchNodeInfo'）

简言之：

• 创建的钩子： 实例已创建，所有数据观察、计算属性、方法、监视/事件回调都已设置，但$el属性尚不可用

• 安装挂钩： 已装入Vue实例，其中el被新创建的vm替换。$el。el是通过新Vue（{…}）创建的实例

为了您的阅读乐趣：

• 生命周期挂钩：

---

创建存储后，您只需使用存储的

分派

方法，即可随时使用。如果需要，您甚至可以在创建Vue之前调用它。我的2c:在我的情况下，在

挂载的
上初始化存储太晚了，因此在
创建的
上初始化是正确的解决方案。
export default {
    name: 'Menu',
    created() {
      this.$store.dispatch('fetchNodeInfo');
    },
...
}