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

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>

问题是子元素中的getTodoList是undefined。如何从存储模块通过父元素将todoList发送到子元素？没有真正的教程，缺少指导，我还没有发现与我的特殊情况相似的东西。

Answer 1

您需要像这样将getTodoList传递给子组件：<Todo :getTodoList="getTodoList" />。但是，如果您将getTodoList作为Vuex获取器，则最好像在具有父级一样直接在子级组件中调用它。