Vue axios nadpisywanie zmiennej

Cześć,
chcę zrobić coś takiego

convertAmount(amount) {
            let price = 0;
            this.$axios.get(this.api_currency_convert_url+`?amount=${amount}`)
            .then((data) => {
                price = data.data.amount;
            })

            return price;
        }

amount to cena wejściowa, konwersja odbywa się na serwerze chcę konwertować te dane w locie a convertAmount używam w pętli v-for problem w tym że price się nie nadpisuje. Wiem, że rozwiązanie może nie jest najbardziej wydajne ale ilość rekordów w pętli nie będzie przekraczać 10 więc nie jest to problem. Problem w samym nadpisaniu, jak można to zrobić?

Dzięki

No oczywiście problem jest taki, że kod z .then(). Wywoła się asynchronicznie.

Kod wywoła się tak:

• deklaracja zmiennej price = 0
• zwrócenie wartości ze zmiennej return price;
• czekanie aż axios zrobi request
• callback z .then()

Musisz zapisać wartość do state, albo poprzez setState(), albo do this.price, jeśli price jest w data().

to ogólnie jest koszyk. Zapis i odczyt jest w Vuex jednak żeby dane nie usuwały się przy odświeżeniu trzymam to w localStorage.
wyświetlam dane tak

v-for="(cart, index) in $store.state.cart"

więc zapis przez this.price raczej odpada, jak można zapisać dane przez setState()?

michalos25 napisał(a):

to ogólnie jest koszyk. Zapis i odczyt jest w Vuex jednak żeby dane nie usuwały się przy odświeżeniu trzymam to w localStorage.

wyświetlam dane tak

v-for="(cart, index) in $store.state.cart"

więc zapis przez this.price raczej odpada, jak można zapisać dane przez setState()?

Bez większej ilości szczegółów Ci nie pomogę, ale w skrócie, Twoja funkcja nie jest w stanie zwrócić żadnej sensownej wartości.

convertAmount(amount) {
    this.$axios.get(this.api_currency_convert_url+`?amount=${amount}`)
        .then(data => {
            const price = data.data.amount;
            // tutaj musisz jakoś wsadzić Twoją cenę, albo do data(), albo do state, albo do Vuex'a, albo jeszcze gdzieś indziej
        });
}

Ewentualnie możesz zamienić tą funkcję na async, i zrobić zapisanie gdzieś indziej; ale i tak musisz je wsadzić do state albo Vuex prędzej czy później.

jeśłi to może pomóc, to jest cały kod Vuex. przyda laby mi się jakaś rada jak można tą cenę odpowiednio dodać

let cart = window.localStorage.getItem('cart');
let cartCount = window.localStorage.getItem('cartCount');

let store = {
    state: {
        cart: cart ? JSON.parse(cart) : [],
        cartCount: cartCount ? parseInt(cartCount) : 0
    },
    mutations: {
        addToCart(state, item) {
            let found = state.cart.find(product => product.id == item.id)

            if (found) {
                found.quantity++
            } else {
                state.cart.push(item);
                Vue.set(item, 'quantity', 1)
            }

            state.cartCount++;


            this.commit('saveCart');

            let basketIcon = document.getElementById('basketIconNavbar');
            if (localStorage.getItem('cartCount') > 0) {
                basketIcon.style.display = 'block';
            } else {
                basketIcon.style.display = 'none';
            }
        },

        removeItem(state, item) {
            let index = state.cart.indexOf(item);

            if (index > -1) {
                let product = state.cart[index];
                state.cartCount -= product.quantity;

                state.cart.splice(index, 1);
            }

            this.commit('saveCart');

            let basketIcon = document.getElementById('basketIconNavbar');
            if (localStorage.getItem('cartCount') > 0) {
                basketIcon.style.display = 'block';
            } else {
                basketIcon.style.display = 'none';
            }
        },

        saveCart(state) {
            window.localStorage.setItem('cart', JSON.stringify(state.cart));
            window.localStorage.setItem('cartCount', state.cartCount);
        }
    }
};

export default store;

let store = {
    state: {
        cart: cart ? JSON.parse(cart) : [],
        cartCount: cartCount ? parseInt(cartCount) : 0,
        price: // tutaj
    },
    mutations: {
        setPrice(state, price) {
          // tutaj mutator
        },
        addToCart(state, item) {
           // [...]

a potem

this.$axios.get(this.api_currency_convert_url+`?amount=${amount}`)
    .then(data => {
         // tutaj zmień stan w Vuex
    })