Vuex: почему возвращает пустой объект?

Question

[Nik_Set_7]

Использую vuex для хранения, получения и возврата данных компонентам. Получил $store, получил данные.
В документации Vuex указывается, что желательно использовать getters для получения данных.

const store = new Vuex.Store({
	state: {
		news: [],
	},
	getters: {
        news: (state) => state.news
	},
...
});

export default {
...
        computed: {
            news () {
                console.log(this);
                console.log(this.$store.getters.news);
                return this.$store.getters.news;
            }
        },
...
}

Однако в консоли выводится "пустой" объект с нулевой длиной под именем:
[__ob__: xe]

При этом в this информация по новостям в $store есть. В чём может быть причина ошибки?

UPD:
Ошибка оказалась до банальности простой. Т.к. я делаю ajax запрос, то ответ приходит не мгновенно, тогда как рендеринг и пр. происходит сразу.
Следовательно получается, что с одной стороны, информация о новостях есть, т.к. ответ пришёл и изменения были внесены в vuex. Но в момент рендеринга данных не было, поэтому в консоли не было информации о нужной мне переменной/массиве. По крайне мере я так понимаю проблему.
Для её решения нужно:
- перенести получение по ajax из actions напрямую в компонент, при этом делать изменения состояния vuex через мутации
- использовать асинхронные функции или модули типа vue-async-computed

Answer 1

[Nikita Velko]

Зачем вообще делать подобный геттер, который возвращает просто стэйт из сторы?
Если тоже самое вы можете получить через:

...mapState({
  news: state => state.news,
});

или this.$store.state.news

UPD: Вообще, правильней будет создать экшен в этой же сторе, который будет фетчить данные и заполнять массив. Ну и используйте async/await, например. Типа вот так:

const actions = {
  async fetchNews({ commit }) {
    // Стреляете запрос в нужный эндпоинт
    const { data } = await axios.get('http://your.api.endpoint');
    
    if (data.result) {
      // Записываете новости в стору с помощью мутации
      commit(SET_NEWS, data.data);
    } else {
      // Обрабатываете ошибку, если не удалось получить новости
    }
    
    return data;
  },
};

Ну а в самом компоненте получаете стэйт сторы, как я описывал выше. Ну и если нужно, рендерите блок с новостями через v-if="news.length > 0".

Comments

[Nik_Set_7]

Проблема решена, запись в вопросе обновлена

[Nikita Velko]

Nik_Set_7, обновил ответ.

[Nik_Set_7]

Nikita Velko, Мда, один вариант интереснее другого.
Буду пробовать и выбирать наиболее правильные и самое главное работающие методы
В любом случае спасибо