一、vuex概述

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

2、是什么：vuex是一个vue的状态管理工具，状态就是数据

(简述：vuex是一个插件，可以帮我们管理vue通用的数据)

3、场景：

(1)某个状态在很多组件来使用

(2)多个组件共同维护一份数据

4、优势：

(1)共同维护一份数据，数据集中化管理

(2)响应式变化

(3)操作简洁(vuex提供了一些辅助函数)

5、构建vuex环境

1、安装vuexyarn add vuex@3   (233,344)2、新建vuex模块文件新建 store/index.js专门存放vuex3、创建仓库Vue.use(Vuex)new Vuex.Store()4、main.js导入挂载import store from '@/store/index'store

6、核心概念 - state状态（mapState）

1、提供数据：State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。语法：const store = new Vuex.Store({state: {//数据count:100,title:'大标题'}})        2、获取数据：2.1、通过store直接访问模板中：{{ $store.state.xxx }}组件逻辑中：this.$store.state.xxxJS模块中：  store.state.xxx2.2、通过辅助函数mapState是辅助函数，可以帮助我们吧store中的数据自动映射到组件的计算属性中使用步骤：2.2.1、导入mapStateimport { mapState } from 'vuex'2.2.2、数组方式引入statemapState(['所需要的属性'])2.2.3、展开运算符映射...mapState(['所需要的属性'])映射后便能直接用计算属性的方式读取

7、核心概念 - mutations

1、基础语法

1、概念：Vuex同样遵循单向数据流，组件不能直接修改仓库的数据2、报错：默认不会报错，甚至能够自由的修改，可这是一种违背单向数据流原理的做法，若要使其报错，可以添加strict: true,有利于初学者检测不规范的代码（上线时需要关闭）3、目标：使用mutaions修改state的数据(1)定义mutaions对象，对象中存放修改state的方法mutations:{//第一个参数是当前store的state属性addCount(state){state.count += 1            }        (2)组件中提交调用mutationsthis.$store.commit('方法名')

2、传参语法

1、传参语法this.$store.commit('方法名',参数)2、定义语法addCount (state, n) {state.count += n}3、注：Vuex不能传递多个参数（可以使用对象，数组等复杂形式）

8、辅助函数 - mapMutations

1、作用：将mutation中的方法提取出来，映射到组件methods中2、使用：import { mapMutations } from 'vuex'methods:{...mapMutations([函数名])    }

9、核心概念 - actions

(1)目标：明确actions的基本语法，处理异步操作

(2)说明：mutations必须是同步的(便于监测数据变化，记录调试)

1、定义语法actions:{//context：上下文方法名(context,num){//行为        }}2、调用语法this.$store.dispatch('方法',参数)

10、辅助函数 - mapActions

1、同样是映射到组件methods中2、用法：import { mapActions } from 'vuex'methods:{...mapActions(['方法名'])    }

11、核心概念 - getters

1、说明：类似于计算属性，是从state中派生出的状态

1、定义语法：getters:{//(1)getters函数的第一个参数是state//(2)getters函数必须要有返回值方法    }2、访问语法：$store.getters.方法名

12、辅助函数 - mapGetters

1、放在computed中computed:{...mapGetters(['方法名'])    }

13、核心概念 - 模块module(进阶语法)

(1)概念：由于vuex使用单一状态树，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就有可能变得相当臃肿。

1、使用步骤(1)创建store/modules/目录//这个目录下的每个js文件都是一个模块，都有着自己所对应的概念(2)编写js文件const state = {}const mutations = {}...//创建数据和方法export default {//导出state,mutations,...}(3)使用import user from './model/user'//在index.js中导入文件modules: {//在modules下挂载user,}      

(2)目标：掌握模块中state的访问语法

1、使用模块中的数据：(1)直接通过模块名访问$store.state.模块名.xxx(2)通过mapState映射默认根级别的映射 mapState(['xxx'])子模块的映射 mapState('模块名',['xxx'])注：若想通过模块名访问，需要在js中添加namespaced:true

(3)目标：掌握模块中mutation的访问语法

1、直接调用：$store.commit('模块名/方法名',参数)2、通过mapMutations映射默认映射：mapMutations(['xxx'])子模块映射mapMutations('模块名',['xxx'])注：若想通过模块名访问，需要在js中添加namespaced:true

(4)目标：掌握模块中action的访问语法

1、直接调用：$store.dispatch('模块名/xxx',额外参数)2、同mapActions映射默认映射：mapActions(['xxx'])子模块映射mapActions('模块名',['xxx'])注：若想通过模块名访问，需要在js中添加namespaced:true

(5)目标：掌握模块中getters的访问语法

1、直接通过模块名访问$store.getters('模块名/方法名')2、通过mapGetters映射默认根级别的映射mapGetters(['xxx'])子模块的映射 mapGetters('模块名',['xxx'])注：若想通过模块名访问，需要在js中添加namespaced:true