Display JSON file content in Vue

I’ve json file with some data. I’ve to fetch this data and display them in the component.

In my vuex store in actions I have:

async getTodos (context) {
  const todos = []

  const response = await fetch('../../data/todos.json')
  const responseData = await response.json()

  todos.push(responseData)

  context.commit('getTodos', todos)
}

mutations:

getTodos (state, payload) {
  state.todos = payload
}

and state:

state () {
  return {
    todos: []
  }
}

And now how to get this todos in state and display them when Homepage is mounted?

JSON file example:

[
  {
    "id": "1",
    "title": "1st todo",
    "description": "First task",
    "dueTo": "2021-10-03"
  },
  {
    "id": "2",
    "title": "2nd todo",
    "description": "Second task",
    "dueTo": "2021-10-02"
  }
]

Answer

Well you can use mapState in your components

<template>
   <div>
      <div>{{todos}}</div>
   </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
   computed: {
      ...mapState(["todos"])
   }
}
</script>