Vue入门（二十二）

todolist之基本结构——实现通过计算属性获取vuex中定义的todolist的数据

 开始编写代码

        准备好上一讲的代码（视频顺序有问题，文章结尾有正确的观看顺序）

通过计算属性获取 index.js 文件中 state 里定义的 list

放开上一讲注释的代码并注释上一讲编写的代码

<template>
	<div>
		<nav-header></nav-header>
		<nav-main></nav-main>
		<nav-footer></nav-footer>
	</div>
	<!-- <div>
		{{num1}} ----- {{num2}}
		两数之和：{{addNum}}
	</div>
	<div>
		<button @click="add">add</button>
	</div> -->
</template>

引入vuex中的useStore

<script>
	import {
		useStore
	} from 'vuex'
</script>

查看store

<script>
	// @ is an alias to /src
	import NavHeader from '@/components/navHeader/NavHeader'
	import NavMain from '@/components/navMain/NavMain'
	import NavFooter from '@/components/navFooter/NavFooter'
	import {
		defineComponent,
		computed,
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			let store = useStore()
			console.log(store);
			return {
				
			}
		}
	})
</script>

效果

通过计算属性获取 state 里的 list

<template>
	<div>
		<nav-header></nav-header>
		<nav-main></nav-main>
		<nav-footer></nav-footer>
		<div>
			{{list}}
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import NavHeader from '@/components/navHeader/NavHeader'
	import NavMain from '@/components/navMain/NavMain'
	import NavFooter from '@/components/navFooter/NavFooter'
	import {
		defineComponent,
		computed,
		ref
	} from 'vue'
	import {
		useStore
	} from 'vuex'
	export default defineComponent({
		name: 'HomeView', // 组件名称
		// 定义子组件
		components: {
			// NavHeader: NavHeader 键和名相等时可简写为 NavHeader
			NavHeader,
			NavMain,
			NavFooter
		},
		setup() {
			let store = useStore()
			let list = computed(() => {
				return store.state.list
			})
			return {
				list
			}
		}
	})
</script>

 效果

---

视频学习地址

课程导学，vue3.0实现todolist 教程-慕课网 (imooc.com)

视频的顺序有问题，正确的顺序如下：
第3章 todolist 之基本结构
视频：3-1 介绍定义组件
视频：3-3 介绍ref定义单个数据
视频：3-4 介绍reactive定义对象类型的数据
视频：3-6 介绍方法的定义和使用
视频：3-2 实现todolist需要的4个组件
视频：3-5 实现todolist每个组件需要的数据
视频：3-7 实现todolist每个组件需要的方法
视频：3-8 介绍定义状态管理
视频：3-9 实现todolist之使用状态管理的api
视频：3-10 介绍计算属性
视频：3-11 实现通过计算属性获取vuex中定义的todolist的数据