无法将数组从存储模块通过父元素发送到子元素

Question

我有一个商店模块：const state = {    todoList: [        {            id: 1,            title: "Todo One"        },        {            id: 2,            title: "Todo Two"        }    ]};const getters = {    getTodoList: (state) => state.todoList};const actions = {};const mutations = {};export default {    state,    getters,    actions,    mutations};我有一个父元素：<template>  <section>    <h2>Todo List</h2>    <Todo />    <div>      <input        type="text"        name="enterTodo"        placeholder="What are you up today ?"      />      <button type="submit"        @click="addTask"      ><i class="fas fa-plus"></i></button>    </div>  </section></template><script>import Todo from "./Todo.vue";import { mapGetters } from "vuex";export default {  name: "TodoContainer",  components: {    Todo,  },  props: [],  methods: {    addTask: () => {    }  },    computed: mapGetters(["getTodoList"]),};</script>我有子元素：<template>  <div>    <div class="todo" v-for="todo in getTodoList" :key="todo.id">      {{ todo.title }}    </div>  </div></template><script>export default {  name: "Todo",  props: ["getTodoList"],};</script><style scoped></style>问题在于在子元素中。如何通过父元素将 todoList 从存储模块发送到子元素？没有真正的教程，缺乏指南，我没有找到任何与我的特定情况相似的东西。getTodoListundefined

Answer 1

您需要像这样传递给您的子组件：getTodoList

<Todo :getTodoList="getTodoList" />

但是，如果您具有Vuex getter，则最好直接在子组件中调用它，就像您具有父组件一样。如果它未在父级中使用，则无需在那里调用它，然后将其作为道具传递。getTodoList