在Vue中显示JSON个文件内容

Question

我 json 文件中包含一些数据。我必须获取这些数据并将它们显示在组件中。

在我的 vuex 商店中，我有：

async getTodos (context) {
  const todos = []

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

  todos.push(responseData)

  context.commit('getTodos', todos)
}

突变：

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

和状态：

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

现在如何获得此 todos 状态并在安装主页时显示它们？

JSON 文件示例：

[
  {
    "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 1

你可以在组件中使用 mapState

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

Answer 2

您可以为待办事项制作 getter：

getAllTodos: (state) => state.todos

然后在模板中映射 getters :

import { mapGetters } from 'vuex';
computed: {
  ...mapGetters([ 'getAllTodos' ]),
},

<template>
  <ul>
    <li v-for="(todo, i) in getAllTodos" :key="i">{{todo}}</li>
  </div>
</template>

在Vue中显示JSON个文件内容

Display JSON file content in Vue

javascript

json

vue.js

vuex

vuejs2