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

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