Vuex - когда загружать / инициализировать данные магазина с http-сервера - PullRequest
Новая
       17

Vuex - когда загружать / инициализировать данные магазина с http-сервера

0 голосов
/ 10 июня 2018

Я хочу показать некоторые данные в строке меню, которые должны быть извлечены удаленно (http get call) для корректного отображения.Когда мое приложение загружалось, магазин еще не был инициализирован.Где мне это сделать?

Это то, что у меня есть сейчас.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>

хранилище: 

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 () компонента меню?Это было бы как-то странно.Было бы здорово, если бы мой магазин мог как-то сам выполнять исходные http-вызовы без необходимости запуска.Я даже не знаю, как вызвать такое действие из части create ().

Ответы [ 2 ]

0 голосов
/ 12 июня 2018

Взгляните на диаграмму жизненного цикла 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 ({...}).

Для вашего удовольствия от чтения:

0 голосов
/ 10 июня 2018

@ Берт был прав.Я добавил метод отправки в метод create () моего компонента. 

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