vuex的学习与运用

自定义创建项目

基于vuecli自定义创建项目架子

Eslint代码规范

vuex

vuex概述

1. 概念：vuex是一个vue的状态管理工具，状态就是数据，也就是说vuex是一个插件，可以帮助我们管理vue通用的数据(多组件共享的数据)

2. 运用场景

3. 优势：

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

构建vuex环境

1. 安装vuex：(yarn add vuex@3)
2. 构建vuex模块文件
3. 创建仓库
4. main.js导入挂载到vue实例上

state状态

1. 提供数据：state提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中储存。在state对象中可以添加我们要共享的数据
2. 使用数据
   

• 通过辅助函数(简化)：mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中

mutations (修改数据- 同步)

1. 明确：vuex同样遵循单向数据流，组件中不能直接修改仓库的数据
2. 定义mutations对象，对象中存放修改state的方法
3. 组件中提交调用mutations

mutations传参语法

1. 提供mutation函数 (带参数 - 提交载荷 payload，有且只能有一个参数)

2. 页面中提交调用mutation

辅助函数 - mapMutations

1. mapMutations 和 mapState很像，他是把位于mutations中的方法提取出来，映射到组件methods中

actions (处理异步操作)

1. 语法

• 提供actions方法
• 页面中dispatch调用

mapActions - 辅助函数

1. mapActions是把位于actions中的方法提取出来，映射到组件methods中

getters

1. 除了state之外，有时我们需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getter
2. 定义getters
3. 访问getters

module （进阶语法）

1. store的局限性
2. module模块创建与使用

模块中的mapState

1. 访问子模块的数据：尽管已经分模块了，但其实子模块的状态还是会挂到根级别的state中，属性名就是模块名

模块中的mapGetters

1. 使用模块中getters的数据

模块中的mutations

1. 注意：默认模块中的mutation和actions会被挂载到全局，需要开启命名空间，才会挂载到子模块
2. 调用子模块中的mutation

模块中的actions

1. 注意：默认模块中的mutation和actions会被挂载到全局，需要开启命名空间，才会挂载到子模块
2. 调用模块中action