Vue入门（二十）

todolist之基本结构——实现todolist之使用状态管理的api

开始编写代码

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

添加任务功能

在输入框输入后回车将内容添加到列表中

首先将在 NavMain.vue 中定义的 list 复制到 index.js 中，然后编写添加任务方法

export default createStore({
	// vuex 管理的状态对象（定义所需要的状态，用于存储数据）
	// 它应该是唯一的
	state: {
		list: [{
				title: '吃饭',
				complete: false
			},
			{
				title: '睡觉',
				complete: false
			},
			{
				title: '敲代码',
				complete: true
			}
		]
	},
	// 同步修改state 都是方法
	// 第一个参数 state ，第二个参数是要修改的值
	mutations: {
		// 添加任务
		addTodo(state, payload){
			state.list.push(payload)
		}
	},
})

删除任务功能

点击删除按钮时删除任务列表中的一项

export default createStore({
	state: {
		list: [{
				title: '吃饭',
				complete: false
			},
			{
				title: '睡觉',
				complete: false
			},
			{
				title: '敲代码',
				complete: true
			}
		]
	},
	mutations: {
		// 添加任务
		addTodo(state, payload) {
			state.list.push(payload)
		},
		// 删除任务
		delTodo(state, payload) {
			state.list.splice(payload, 1)
		},
	},
})

清除已完成功能

把已经完成的任务删除

import {
	createStore
} from 'vuex'

export default createStore({
	// 定义所需要的状态
	// vuex 管理的状态对象（定义所需要的状态，用于存储数据）
	// 它应该是唯一的
	state: {
		// name: 'jack'
		list: [{
				title: '吃饭',
				complete: false
			},
			{
				title: '睡觉',
				complete: false
			},
			{
				title: '敲代码',
				complete: true
			}
		]
	},
	// 值为一个对象，包含多个用于返回数据的函数
	// 用于将 state 中的数据进行加工
	getters: {},
	// 同步修改state 都是方法
	// 第一个参数 state ，第二个参数是要修改的值
	mutations: {
		// setName(state, payload) {
		// 	state.name = payload
		// 	// state.name.slice(0,1)
		// }

		// 添加任务
		addTodo(state, payload) {
			state.list.push(payload)
		},
		// 删除任务
		delTodo(state, payload) {
			state.list.splice(payload, 1)
		},
		// 清除已完成
		clear(state, payload){
			// 把过滤之后的数组传进来（把已完成的任务过滤出去）
			state.list = payload
		}
	},
	// 异步提交mutations
	// 用于响应组件中的动作
	// 第一个参数 store ，第二个参数是要修改的值
	actions: {
		// asyncsetName(store, params) {
		// 	setTimeout(() => {
		// 		// commit 提交 mutations（调用 mutations 的方法）
		// 		store.commit('setName', params)
		// 	}, 2000)
		// }
	},
	// 模块化
	modules: {}
})

---

视频学习地址

课程导学，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的数据