Question

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

这就是我现在所拥有的。只要没有提取数据，statistics就是一个空对象。

导航组件

nodeInfo

商品

<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（）部分调用一个动作。

Answer 1

在这里查看vue.js生命周期图：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram并阅读生命周期钩子：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks。在理解何时何地添加商店调度方法时，您将大大了解它。 this.$store.dispatch('fetchNodeInfo')

简而言之：

创建钩子：已创建实例，已设置所有数据观察，计算属性，方法，监视/事件回调，但$ el属性尚未可用。
挂钩：已安装Vue实例，其中el由新创建的vm。$ el替换。 el是通过新的Vue（{...}）创建实例。

为了您的阅读乐趣：

生命周期钩子：http://devdocs.io/vue~2-api-options-lifecycle-hooks/

Answer 2

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

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

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

2 个答案: