Как передать в Vuex ответ типа Vue.set(self, 'cities', res.data.data)?

Question

[nastya_zholudeva]

Запрос типа

callApi('towns', queryParams, '').then((res) => {
       this.cities = res.data.data;
  })

я знаю как преобразовать с использованием Vuex. А вот как в actions передать Vue.set(self, 'cities', res.data.data) не понятно.

callApi('towns', queryParams, '').then((res) => {
        Vue.set(self, 'cities', res.data.data);
  })

callApi - функция, делающая запрос к REST API
towns - URL‐путь
queryParams - это параметры после URL‐пути.

Comments

[fl3nkey]

Передавайте данные вторым аргументом?

actionName(context, data) {
//...
}

//..
  this.$store.dispatch('actionName', res.data.data);

[nastya_zholudeva]

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

export const actions = {
    fetchSities (state, {queryParams}) {
        callApi ('towns', queryParams,'').then((res) => {
            state.commit('setSities', Vue.set(self, 'cities', res.data.data))
    })
    },
}

[fl3nkey]

nastya_zholudeva, какова вообще стоит задача, что вы хотите сделать? Выгрузить данные из API и сохранить их в глобальном хранилище (vuex)?

[nastya_zholudeva]

FLUNKEY, да. Но в некоторых местах кода, нужно не только выгрузить данные, но и что-то с ними сделать.
Типа этих
Vue.set(self, 'cities', res.data.data)

или для пагинации, получить данные, а потом еще еще разделить на количество и округлить.

[fl3nkey]

Вообщем-то вы можете использовать асинхронные методы и возвращать промисы в действиях.

//state
cities: []

//mutations
set_sities(state, payload) {
  state.cities = payload;
}

//actions...
fetchSities(context, params) {
  return new Promise((resolve, reject) => {
    callApi('towns', params).then(res => {
      context.commit('set_sities', res.data.data);
      resolve(res); //!
    }).catch(error => reject);
  });
}

//где нибудь
  var params = { ... };
  this.$store.dispatch('fetchSities', params).then(res => {
    console.log(res); //ответ от api
    console.log(this.$store.state.cities); //массив с данными
  });

[nastya_zholudeva]

FLUNKEY, Спасибо огромное)

[nastya_zholudeva]

FLUNKEY, попробовала так сделать, но вылезла ошибка

Uncaught TypeError: Cannot read property 'dispatch' of undefined

//store/sities

import Axios from 'axios'
import callApi from '~/libraries/api.js'

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

export const actions = {
    fetchSities (state, {queryParams}) {
        return new Promise((resolve, reject) => {
                callApi('towns', params).then(res => {
            context.commit('setSities', res.data.data);
        resolve(res); //!
    }).catch(error => reject);
    })
    },
}

export const mutations = {
    setSities: (state, data) => {
    state.cities = Object.assign({}, data)
},
}

//внутри компонента

computed: {
            cities () { return this.$store.state.sities.cities },
        },

 this.$store.dispatch('sities/fetchSities', {queryParams}).then(res => {
                            Vue.set(self, 'cities', this.$store.state.sities.cities);
                        });

[fl3nkey]

nastya_zholudeva, используйте хуки или методы для внедрения кода

//хук mounted
mounted() {
  this.$store.dispatch('sities/fetchSities', {queryParams}).then(res => {
    Vue.set(self, 'cities', this.$store.state.sities.cities);
  });
}

[nastya_zholudeva]

FLUNKEY, у меня

this.$store.dispatch('sities/fetchSities', {queryParams}).then(res => {
    Vue.set(self, 'cities', this.$store.state.sities.cities);
  });

находится внутри methods