Vue2.x核心技术与实战(六)-Vuex

目录

七、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中的数据自动映射到组件的计算属性中

---