Как сконкатенировать данные Vuex?

Question

[nastya_zholudeva]

Есть такой запрос, его нужно перенести в Vuex. Как это можно сделать?

callApi ('products', queryParams, '').then((data) => {
                    if (data.data.data.length) {
                        this.goods = this.goods.concat(data.data.data);
                        $state.loaded();
                        $('#preview-buttons button').hide();
                    } else {
                        $('#preview-buttons button').show();

                    }
                });

Comments

[Ilya]

И снова здравствуйте, вам нужно создать экшен, и вместо this.goods = this.goods.concat(data.data.data) вызывать мутацию в которую передавать data.data.data

p.s. Зачем туглить состояние кнопки через jquery если у вас есть vuejs на проекте?)

Можете писать в скайп [e-mail]

[nastya_zholudeva]

Ilya,  что-то вроде этого?

export const state = () => ({
    products: []
})

export const actions = {
    fetchProducts (state, {queryParams}) {
        callApi ('products/', queryParams, '').then((res) => {
            state.commit('setProducts', res.data.data)
    })
    }
}

export const mutations = {
    setProducts: (state, data) => {
            state.products = state.products.concat(data)
        // state.good = Object.assign({}, data)
    }
}

Answer 1

[Aslan]

Может так?
this.goods.push(...data.data.data)

Answer 2

[lavezzi1]

В vuex сделать mutation и вызывать его в then() запроса и передавать данные. А внутри мутации уже написать логику для конкатенирования.
this.$store.commit('CONCAT_ITEMS', data);

P.S Выкиньте jquery если вы уже используете Vue.

Comments

[nastya_zholudeva]

lavezzi1 , что-то вроде этого?

export const state = () => ({
    products: []
})

export const actions = {
    fetchProducts (state, {queryParams}) {
        callApi ('products/', queryParams, '').then((res) => {
            state.commit('setProducts', res.data.data)
    })
    }
}

export const mutations = {
    setProducts: (state, data) => {
            state.products = state.products.concat(data)
        // state.good = Object.assign({}, data)
    }
}

[lavezzi1]

nastya_zholudeva, да верно

[nastya_zholudeva]

lavezzi1, подскажите а как поступить, если у меня при каждом запросе (у меня это бесконечная прокрутка) нужно работать с некоторыми переменными типа

currentOffset += lim;
                    step ++;

То есть изначально (без Vuex), у меня это выглядело так

callApi ('products', queryParams, '').then((data) => {
                    currentOffset += lim;
                    step ++;
                    if (data.data.data.length) {
                        this.goods = this.goods.concat(data.data.data);
                        $state.loaded();
                        $('#preview-buttons button').hide();
                    } else {
                        $('#preview-buttons button').show();

                    }

Но теперь переношу все это в Vuex, и чего-то совсем туго идет:(