在 Vue 中显示 JSON 文件内容答案

【问题标题】：Display JSON file content in Vue在 Vue 中显示 JSON 文件内容
【发布时间】：2021-11-23 04:29:36
【问题描述】：

我有一些数据的 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: []
  }
}

现在如何让这个待办事项处于状态并在加载主页时显示它们？

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"
  }
]

【问题讨论】：

标签： javascript json vue.js vuex

【解决方案1】：

你可以在你的组件中使用 mapState

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

【讨论】：

【解决方案2】：

你可以为 todos 做 getter：

getAllTodos: (state) => state.todos

然后在模板中映射getter：

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

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

【讨论】：