'Have trouble concating two arrys in Vuex

I have some trouble when concating two arrays in my store.js I have a to do list app that i want to get the first data from apiTask and then when creating new tasks it will concat apiTask with tasks. But it will show all properties after adding one task and the created task will be disappeared by adding the new one. I would appreciate if someone can help me with it. i have created a code sandbox of my project.

vue.jsvuexvuex-modules


Solution 1:[1]

Maybe

ADD_TASK(state, task) {
    state.tasks.unshift({
        id: String(Math.floor(Math.random() * 999999999)),
        title: task.title,
        type: task.type,
        value: task.value,
        done: false
    })
  },

https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection

Solution 2:[2]

try to separate your adding-new-task logic and setting apiTasks to tasks logic into two mutations. call the mutation with state.tasks = state.apiTasks assigning in your index.vue created/mounted hook

here's the example

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Maxim Colesnic
Solution 2 Emir

Related Questions