Как правильно изменить состояние компонента в мутациях?

Question

[DiseaseC]

Есть запрос из компонента:

this.$store.dispatch('FETCH_STORIES');

Действие:

FETCH_STORIES: ({ commit }) => {
        axios.get("http://hn.algolia.com/api/v1/search?tags=front_page")
            .then(response => {
                let result = response.data;
                commit("APPEND_STORY", result);
            })
},

Мутация:

APPEND_STORY: (state, article) => {
        state.stories.push(article);
    },

Стейт выглядит так:

state: {
    stories: [],
}

Из-за метода push в мутациях, данные в шаблон попадали завёрнутыми в массив (внутри был только один элемент), и чтобы получить доступ к данным приходилось пробегаться по массиву циклом. Мне необходимо от этого цикла избавиться, а значит, надо избавиться и от массива, и от метода push.
Пытаюсь как-то так, но данные не приходят:

APPEND_STORY: (state, payload) => {
        state.stories = payload;
    },

Как можно это исправить?

Comments

[0xD34F]

данные не приходят

Приходят.

[DiseaseC]

0xD34F, если в mutations вывести в консоль, то их можно увидеть
Но если обратиться к ним из шаблона, будет undefined

[0xD34F]

DiseaseC, ну так может проблема в том, что у вас в шаблоне какая-то ерунда? Вы подумайте.

[Andrey Suha]

DiseaseC,

APPEND_STORY: (state, article) => {
        state.stories.push(article);
    }

Вот тут article это массив или объект?

[DiseaseC]

0xD34F, в шаблоне только <p> {{stories}}</p>, ну то есть нечему ломаться

[DiseaseC]

Andrey Suha, объект, если я не ошибаюсь

[0xD34F]

DiseaseC, вот как? А что такое stories?

[DiseaseC]

0xD34F, stories: this.$store.state.stories,

[Andrey Suha]

DiseaseC, и Вам нужно что бы это объект был доступен по this.$store.state.stories ?

[DiseaseC]

Andrey Suha, да

[0xD34F]

DiseaseC,

stories: this.$store.state.stories,

Убил бы.

computed: {
  stories() {
    return this.$store.state.stories;
  },
},

[DiseaseC]

0xD34F, сработало
Спасибо, не злись)))

Answer 1

[Антон Антон]

Для избавления от цикла можно сделать вместо массива объект или map с ключом id. Почему в сторе лажа - надо смотреть код. Мутация в целом правильная.