Vuex的基本使用

文章目录

• 一、Vuex概述
• • 1.是什么
  • 2.使用场景
  • 3.优势
  • 4.注意
• 二、如何构建vuex多组件共享数据环境
• • 1.创建项目
  • 2.创建三个组件
  • 3.源代码
• 三、vuex 的使用 - 创建仓库
• • 1.安装 vuex
  • 2.新建 `store/index.js` 专门存放 vuex
  • 3.创建仓库 `store/index.js`
  • 4 在 main.js 中导入挂载到 Vue 实例上
  • 5.测试打印Vuex
• 四、核心概念 - state 状态
• • 1.目标
  • 2.提供数据
  • 3.使用数据
  • • 3.1 通过 store 直接访问
    • 3.2 通过辅助函数 (简化)
• 五、核心概念-mutations
• • 1.定义mutations
  • 2.格式说明
  • 3.组件中提交 mutations
  • 4. mutations 传参语法
  • 5. 辅助函数- mapMutations
• 六、核心概念 - actions
• • 1.定义actions
  • 2.组件中通过dispatch调用
  • 3.辅助函数 -mapActions
• 七、核心概念 - getters
• • 1.定义getters
  • 2.使用getters
  • • 2.1原始方式-$store
    • 2.2辅助函数 - mapGetters
• 八、核心概念 - module
• • 1.目标
  • 2.问题
  • 3.模块定义 - 准备 state
  • 4.获取模块内的state数据
  • • 4.1.目标：
    • 4.2.使用模块中的数据
    • 4.3.代码示例
  • 5.获取模块内的getters数据
  • • 5.1.目标：
    • 5.2.语法：
    • 5.3.代码演示
  • 6.获取模块内的mutations方法
  • • 6.1.目标：
    • 6.2.注意：
    • 6.3.调用方式：
    • 6.4.代码实现
  • 7.获取模块内的actions方法
  • • 7.1.目标：
    • 7.2.注意：
    • 7.3.调用语法：
    • 7.4.代码实现
  • 8.Vuex模块化的使用小结
  • • 8.1.直接使用
    • 8.2.借助辅助方法使用

一、Vuex概述

官网：https://v3.vuex.vuejs.org/zh/

目标：明确 vuex 是什么，应用场景，优势

1.是什么

Vuex 是一个 Vue 的 状态管理工具，状态就是数据。

大白话：Vuex 是一个插件，可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。例如：购物车数据、个人信息数据

2.使用场景

①某个状态 在 很多个组件 来使用 (个人信息)

②多个组件 共同维护 一份数据 (购物车)

3.优势

①共同维护一份数据，数据集中化管理
②响应式变化
③操作简洁 (vuex提供了一些辅助函数)

4.注意

官方原文：

• 不是所有的场景都适用于vuex&#