Vue学习日记 Day6 —— Vuex

一、vuex概述

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

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

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

3、场景：

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

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

4、优势：

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

(2)响应式变化

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

5、构建vuex环境

	1、安装vuex
	    yarn add vuex@3   (233,344)
	2、新建vuex模块文件
	    新建 store/index.js专门存放vuex
	3、创建仓库
	    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.xxx
	        JS模块中：  store.state.xxx
	    2.2、通过辅助函数
	        mapState是辅助函数，可以帮助我们吧store中的数据自动映射到组件的计算属性中
	        使用步骤：
	        2.2.1、导入mapState
	            import { mapState } from 'vuex'
	        2.2.2、数组方式引入state
	            mapState(['所需要的属性'])
	        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)组件中提交调用mutations
	        this.$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