教育网站 网页赏析找公司做网站要注意什么问题
目录
七、Vuex 的基本使用
7.1 vuex概述
7.2 构建vuex [多组件数据共享] 环境
7.3 创建一个空仓库
7.4 核心概念 - state状态
7.5 核心概念 - mutations
7.6 辅助函数 - mapMutations
7.7 核心概念 - actions
7.8 辅助函数 - mapActions
7.9 核心概念 - getters
7.10 核心概念 - 模块module (进阶语法)
7.10.1 module模块的创建
7.10.2 模块中state的访问语法
7.10.3 模块中getters的访问语法
7.10.4 模块中 mutation 的调用语法
7.10.5 模块中action的调用语法(同理-直接类比mutation即可)
7.11 综合案例 - 购物车
七、Vuex 的基本使用
7.1 vuex概述
目标：明确vuex是什么，应用场景，优势
1. 是什么：
- vuex是一个vue的状态管理工具，状态就是数据。
- 大白话: vuex是一个插件，可以帮我们管理vue通用的数据(多组件共享的数据)
- 例如：购物车数据个人信息数据
2. 场景：
① 某个状态在很多个组件来使用(个人信息)
② 多个组件共同维护一份数据(购物车)
3. 优势：
① 共同维护一份数据，数据集中化管理
② 响应式变化
③ 操作简洁(vuex提供了一些辅助函数)
7.2 构建vuex [多组件数据共享] 环境
目标：基于脚手架创建项目，构建vuex多组件数据共享环境
效果是三个组件，共享一份数据：
- 任意一个组件都可以修改数据
- 三个组件的数据是同步的
7.3 创建一个空仓库
目标：安装vuex插件，初始化一个空仓库
- Vue2版本对应路由是3版本，对应的vuex也是3版本
- Vue3版本对应路由是4版本，对应的vuex也是4版本
7.4 核心概念 - state状态
目标：明确如何给仓库提供数据，如何使用仓库的数据
1. 提供数据：
State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。
在state对象中可以添加我们要共享的数据。
2. 使用数据：
① 通过store直接访问
② 通过辅助函数(简化)
mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中
