Skip to content

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>