Vue入门（十九）

todolist之基本结构——介绍定义状态管理

Vuex

Vuex 是什么

1. 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
2. 官网说明：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

什么时候使用 Vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

state

1. vuex 管理的状态对象（定义所需要的状态，用于存储数据）
2. 它应该是唯一的

getters

1. 值为一个对象，包含多个用于返回数据的函数
2. 用于将 state 中的数据进行加工

mutations

1. 值是一个对象，包含多个直接更新 state 的方法
2. mutations 中方法的特点：不能写异步代码、只能单纯的操作 state（同步修改state）

actions

1. 值为一个对象，包含多个响应用户动作的回调函数（用于响应组件中的动作）
2. 通过 commit( ) 来触发 mutation 中函数的调用, 间接更新 state（异步提交mutations）
3. 可以包含异步代码（定时器, ajax 等等）

modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象

---

开始编写代码

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

在 store 文件夹的 index.js 中编写代码

import {
	createStore
} from 'vuex'

export default createStore({
	// 定义所需要的状态
	state: {
		name: 'jack'
	},
	// 用于将 state 中的数据进行加工
	getters: {},
	// 同步修改state 都是方法
	// 第一个参数 state ，第二个参数是要修改的值
	mutations: {
		setName(state, payload) {
			state.name = payload
			// state.name.slice(0,1)
		}
	},
	// 异步提交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的数据

视频教程不是最新的，有东西没讲（getters、modules），看完本教程后要找更好更新的教程学习