@ObehanProger

Почему не определяется длина объекта, полученного из хранилища во Vuex?

Использую хранилище Vuex, чтобы отфильтровать новости по автору. Вот основные элементы:
Vue.use(Vuex)
	const store = new Vuex.Store({
		state: {
		    news: null,
			author_id:'all'
		  },
		getters: {
		  NEWS: state => {
		    return state.news;
		  },
		  AUTHOR: state => {
		    return state.author_id;
		  }
		},
		mutations: {
			SET_NEWS: (state, payload) => {
			    state.news = payload;
			},
			SET_AUTHOR: (state, payload) => {
			    state.author_id = payload;
			}
		},
		actions: {
			GET_NEWS: async (context, author_id='all') => {
			  let data = await axios.get('http://news/author_'+author_id).then(response => {return response.data});
				      context.commit('SET_NEWS', data);
			},
			GET_AUTHOR: async (context,author_id) => {
				      context.commit('SET_AUTHOR', author_id);
			}
		}
	});
	const app = new Vue({
		el: '#content',
		store,
		data: {
		    selected_author: 'all'
		},
		mounted() {
			this.$store.dispatch('GET_NEWS','all');
		},
		methods:{
			async onGetNews () {
      			await this.$store.dispatch('GET_NEWS',this.selected_author);
      			console.log(this.$store.getters.NEWS.length);
      		}
		}
	});

При вызове метода onGetNews в консоли пишет: Error in render: "RangeError: Invalid array length", а длину массива выдает как undefined.
Если вызвать в onGetNews():
console.log(this.$store.getters.NEWS)
то выводит объект:
{__ob__: Observer}
12: (...)
13: (...)
__ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
get 12: ƒ reactiveGetter()set 12: ƒ reactiveSetter(newVal)
get 13: ƒ reactiveGetter()set 13: ƒ reactiveSetter(newVal)
__proto__: Object

Почему не определяет длину этого объекта?Как определить?
  • Вопрос задан
  • 56 просмотров
Пригласить эксперта
Ответы на вопрос 1
mironovbam
@mironovbam
Фронтендер
Давайте определимся: либо мы используем async/await либо классический promise
Первый вариант:
async GET_NEWS() {
    const { data } = await axios.get('http://news/author_' + author_id);
    context.commit('SET_NEWS',  data)
};


Второй вариант:
GET_NEWS() {
    axios.get('http://news/author_' + author_id).then(response => {
        context.commit('SET_NEWS',  response.data);
    })
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы