收到错误 TypeError：使用 Vuex 时无法读取 vuejs 中未定义(读取"状态")的属性

Question

我正在努力学习vuex，并在youtube上学习vuex教程，我遇到了一个错误类型错误：无法读取未定义的属性(读取"state"(，我不知道为什么会出现此错误，我认为可能是因为更新的版本不确定。这是我的代码：TodoList.vue

<template>
<div>
<h4>Todo list</h4>
<todo
v-for="(task, index) in $store.state.todos" // getting error here
:key="index"
:todo="todo"
></todo>
</div>
</template>
<script>
import Todo from "./Todo.vue";
export default {
name: "TodoList",
components: { Todo },
computed: {},
};
</script>
<style>
</style>

这是我的store/index.js

import { createStore } from 'vuex';
export const store = createStore({
state: {
todos: [{
title: 'Task 1',
completed: false
},
{
title: 'Task 2',
completed: false
}
]
}
// other stuff
});

Answer 1

mapState是一个帮助程序，可以简化创建反映给定状态值的计算属性

您可以访问以下数据：

<template>
<div>
<h4>Todo list</h4>
<todo
v-for="(task, index) in todos" 
:key="index"
:todo="todo"
></todo>
</div>
</template>

import { mapState } from 'vuex'
export default {
data: {},
computed: {
...mapState({
todos: state => state.todos
})
}
}