Vue/Vuex - How to correctly change the state of a component in mutations?

Question

Vue.js

I need to parse the API using vue and vuex
There is a request from the component:
this.$store.dispatch('FETCH_STORIES');
Action:

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);
            })
},

Mutation:

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

The repository looks like this:

state: {
    stories: [],
}

Due to the push method in mutations, the data in the template got wrapped in an array (there was only one element inside), and in order to access the data, it was necessary to loop through the array. I need to get rid of this cycle, which means I need to get rid of both the array and the push method.
I try something like this, but the data does not come

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

How can this be fixed?

Answer 1

To get rid of the cycle, you can make an object or a map with the id key instead of an array. Why is there crap in the store - you need to look at the code. The mutation is generally correct.