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

这就是我现在拥有的.nodeInfo是空对象,只要不提取数据.

navigation component

<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>

store:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import axios from 'axios';

const iri_ip = '192.168.1.199';
const iri_port = '14265';

const state = {
  token: null,
  loading: false,
  nodeInfo: {}
};

const mutations = {
  SET_NODE_INFO(state, info) {
    state.nodeInfo = info;
  }
};

const actions = {
  fetchNodeInfo({commit}) {
    axios(createIriRequest('getNodeInfo')).then(response => {
      console.log(response.data);
      commit('SET_NODE_INFO', response.data);
    });
  }
};

const getters = {
  token: state => state.token,
  loading: state => state.loading,
  nodeInfo: state => state.nodeInfo
};

const loginModule = {
  state,
  mutations,
  actions,
  getters
};

function createIriRequest(command) {
  return {
    url: `http://${iri_ip}:${iri_port}`,
    data: {'command': command},
    method: 'post',
    headers: {
      'Content-Type': 'application/json',
      'X-IOTA-API-Version': '1'
    }
  };
}

export default new Vuex.Store({
  modules: {
    loginModule
  }
});

这个名字目前没有多大意义.但是我需要从菜单组件的create()方法调用"actions"吗?那会有点奇怪.如果我的store 能够在无需触发的情况下自行进行初始http调用,那就太棒了.我甚至不知道如何从create()部分调用这样的操作.

推荐答案

@伯特是对的.我将dispatch方法添加到组件的created()方法中.

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

Vue.js相关问答推荐

在Vue 2中,是否可能在不创建组件的情况下注入代码块?

VSelect - Select 不适用于 Vuetify 3 中的自定义项目插槽

如何在 vue2.7 中删除 slot-scope

如果 Vuetify 自动完成没有匹配的结果,则保留输入的文本

VueJS - 将单独的组件加载到 vue 实例中

如何在 vue 组件之外访问$apollo?

Vue.js 开发工具未显示

为什么组件在 v-if 下没有被销毁

如何为 Vue 应用提供 robots.txt

在没有组件的vue js中拖放

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

将数据传递给另一条路由上的组件

为什么我在 vue.js 中得到避免使用 JavaScript 一元运算符作为属性名称?

取消选中单选按钮

在加载数据之前触发mounted方法 - VueJS

Vuetify v-btn 路由活动类问题

Vue CLI - 将构建输出组合到单个 html 文件

如何将 git hash 添加到 Vue.js 组件

使用 Vue.js 获取所有选中复选框的列表

TypeError: Object(...) 不是 Vue 中的函数