Как установить состояние из внешнего API в магазине Vuex - PullRequest
Новая
       10

Как установить состояние из внешнего API в магазине Vuex

0 голосов
/ 24 мая 2019

В моем store.js я инициирую объект 

let exchangeRates = {
    GBPtoUSD: 0, // American dollar
    GBPtoEUR: 0, // Euro
    GBPtoCAD: 0, // Canadian dollar
    GBPtoINR: 0, // Indian rupee
    GBPtoCHF: 0 //Swiss franc
}

Затем я устанавливаю его значение с помощью 

function getExchangeRates() {
    return axios.get('https://api.exchangeratesapi.io/latest?base=GBP&symbols=USD,EUR,CAD,CHF,INR')
                .then((response)=> {
                    exchangeRates.GBPtoUSD = response.data.rates.USD;
                    exchangeRates.GBPtoEUR = response.data.rates.EUR;
                    exchangeRates.GBPtoCAD = response.data.rates.CAD;
                    exchangeRates.GBPtoINR = response.data.rates.INR;
                    exchangeRates.GBPtoCHF = response.data.rates.CHF;
                })
                .catch((error)=> {console.log(error)})
}

Мое состояние получает значения, назначенные следующим образом 

state: {
        GBPtoUSD: exchangeRates.GBPtoUSD, // American dollar
        GBPtoEUR: exchangeRates.GBPtoEUR, // Euro
        GBPtoCAD: exchangeRates.GBPtoCAD, // Canadian dollar
        GBPtoINR: exchangeRates.GBPtoINR, // Indian rupee
        GBPtoCHF: exchangeRates.GBPtoCHF //Swiss franc
    }

Затем я настраиваю геттеры, такие как 

getGBPtoUSD: state => {
            return state.GBPtoUSD;
        },

Проблема в том, что когда позже я использую этот геттер в своем компоненте, как это 

...mapGetters( [ "getGBPtoUSD" ] )

<li class="list-group-item py-3 ">
            {{ precise(userInputPrice) }}£ in USD is
            {{ precise(userInputPrice * getGBPtoUSD()) }} US dollars
</li>

Я получаю getGBPtoUSD как 0 - начальное состояние.

Как я могу это исправить, чтобы значение состояния фактически назначалось извне?Мой подход к этому явно не работает.

EDIT1

Хорошо, так что 

exchangeRates.GBPtoUSD = response.data.rates.USD;
      console.log(exchangeRates.GBPtoUSD)

записывает правильное значение около 1,27.Так где я облажался?

1 Ответ

0 голосов
/ 24 мая 2019

Я сделал этот пример о том, как установить состояние из внешнего сервиса, используя axios 

// main.js

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
import axios from "axios";

Vue.config.productionTip = false;

Vue.use(Vuex);

const store = new Vuex.Store({
  // create the state to store the data
  state: {
    todo: {}
  },

  // make an asynchronous call to get the data
  actions: {
    getTodoItem(state, index) {
      return axios.get(`https://jsonplaceholder.typicode.com/todos/${index}`);
    }
  },

  // set data in state
  mutations: {
    setTodo(state, value) {
      Vue.set(state, "todo", value);
    }
  }
});

new Vue({
  store, // loads the store
  render: h => h(App)
}).$mount("#app");

<!-- App.vue -->

<script>
import { mapState, mapActions, mapMutations } from "vuex";

export default {
  computed: {
    ...mapState(["todo"]),
    hasTodo() {
      return Object.keys(this.todo).length;
    }
  },
  methods: {
    ...mapActions(["getTodoItem"]),
    ...mapMutations(["setTodo"]),

    async getTodo() {
      // random number between 1 and 200
      const index = Math.floor(Math.random() * 200) + 1;
      const { data } = await this.getTodoItem(index);
      this.setTodo(data);
    }
  },
  mounted() {
    this.getTodo();
  }
};
</script>


<template>
  <div id="app">
    <div v-if="hasTodo">Todo: {{ todo.title }}</div>
    <b v-else>Loading..</b>
  </div>
</template>

https://codesandbox.io/s/vue-template-y69be

...