vuex知识点

0. 什么是状态？为什么要管理？怎么去管理？

状态本质是一种可以描述视图状态、行为的数据结构。
状态大致可以分为两类，本地状态和共享状态
本地状态，比如 vue 中的 data
业务中存在的兄弟节点通信、祖孙节点通信等情况。通信的目的是为了状态分享，被分享的状态就是共享状态。
状态管理是通过一定的算法将这些数据结构组织、管理起来，又回到了 程序=算法+数据结构 这一基本概念。

1. 什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的全局状态管理工具,它采用集中式存储管理应用中的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。用于任意组件之间进行通信。

Vuex由以下几个核心部分组成：
state:存储数据；
mutations:用于变更state中的数据；
actions:调用mutations方法，处理异步任务；
getters:对state中已有的数据进行加工处理形成新的数据，state中数据发生变化，Getters的数据也会跟着变化。

Vuex官方文档

2. 使用vuex统一管理的好处

1. 能够在vuex中集中管理共享的数据，易于开发和后期维护。
2. 能够高效的实现组件之间的数据共享，提高开发效率。
3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。
   

3. vuex的基本使用步骤

//1. 安装vuex依赖包 
//npm  install  vuex  --save
//2. 在store文件夹下新建一个index.js使用vuex
//2.1. 导入vuex包 
import  Vue  from  'vue' 
import  Vuex  from  'vuex' 
Vue.use(Vuex)
//2.2.  创建store对象 
export default new  Vuex.Store({ 
	//state中存放的就是全局共享的数据 
	state:{ }, 
	mutations:{ }, 
	actions:{ } ,
	getters:{ }
})

//3. 将store对象挂载到vue实例中 
import store from './store' 
new Vue({ 
	render: h => h(App), 
	router, 
	//所有组件都可以直接从store中获取数据了 
	store 
}).$mount('#app')

4. vuex核心概念

1. State ----State中存放的就是全局共享的数据

组件访问State中的数据的方式：
第一种：this.$store.state.全局数据名称
第二种方法：mapState映射函数

//第一步，在组件中导入mapState函数
import {mapState} from 'vuex'
//第二步，通过mapState函数将当前组件需要的全局数据映射为当前组件的computed计算属性
//该属性就可以直接使用了例如<div>{{myDate}}</div>
computed:{
...mapState(['myDate']);
}

2. Mutations ---- 用于变更Store中的数据

(1). 只能通过mutations变更Store数据，不可以使用this.$store.state.全局数据名称= 啥啥啥的方式直接操作Store中的数据。
(2). 通过mutations变更Store数据虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
(3). mutations里不能编写异步代码

//实例：
//定义Mutation
const store = new Vuex.Store({
	state: {count: o},
	mutations: {
		//变更状态函数
		add(state){
			state.count++
		}
		//外界可传参的变更状态函数,第二参数表示外界传入的参数
		change(state,step){
			state.count+=step
		}
	}
})
//*************************************
//在组件中调用变更状态函数第一种方法
methods:{
	handle1(){
		//触发mutations中的状态变更函数
		this.$store.commit('add');
	},
	handle2(){
		//触发mutations中的状态变更函数,携带参数
		this.$store.commit('change',3);
	}
}
//*************************************
//在组件中调用变更状态函数第二种方法
//第一步，在组件中导入mapMutations函数
import{mapMutations} from 'vuex'
//第二步：通过mapMutations函数将当前组件需要的mutations函数映射为当前组件的methods方法
methods:{
	...mapMutations(['add','change']),
	handle1(){
		this.add();
	},
	handle2(){
		this.change(3);
	}
}

3. Actions ---- 用于处理异步任务

Actions 用于处理异步任务，不能直接修改State中的数据，需要调用mutations里的状态变更函数

//定义Action
const store = new Vuex.Store ({ 
	state: {count: o},
	mutations: {
		add(state){
			state.count++;
		},
		sub(state,step){
			state.count -= step;
		}
	},
	actions: {
		addAsync(context){
			setTimeout(()=> {
				context.commit( 'add' );
			}, 1000)
		},
		subAsync(context,step){
			setTimeout(()=> {
				context.commit( 'sub',step );
			}, 1000)
		}
	}
})
//***********************************************
methods:{
	handle1(){
		//触发Action的第一种方式
		this.$store.dispatch ('addAsync');
	},
	handle1(){
		//触发Action的第一种方式
		//带参数
		this.$store.dispatch ('subAsync',step);
	}
}
//***********************************************
//触发Action的第二种方式
//第一步，在组件中导入mapActions函数
import{mapActions} from 'vuex'
//第二步：通过mapActions函数将当前组件需要的actions函数映射为当前组件的methods方法
methods:{
	...mapActions(['addAsync','subAsync']),
	handle1(){
		this.addAsync();
	},
	handle2(){
		this.subAsync(3);
	}
}

4. Getters---- 对state中已有的数据进行加工处理形成新的数据，state中数据发生变化，Getters的数据也会跟着变化。

//定义Getters
conststore=new Vuex.Store({
	state:{count:0},
	getters:{
		showNum:state=>{
			return '当前最新的数量是['+state.count+']';
		}
	}
})
//**********************************
//获取Getters里的新属性的第一种方法
this.$store.getters.名称
//第二种方法：mapGetters映射函数
//第一步，在组件中导入mapGetters函数
import {mapGetters} from 'vuex'
//第二步，通过mapGetters函数将当前组件需要的全局数据映射为当前组件的computed计算属性
//该属性就可以直接使用了例如<div>{{showNum}}</div>
computed:{
...mapGetters(['showNum']);
}

5. vuex模块化module管理

对全局数据可以进行分模块管理。

import Vue from 'vue'
import Vuex from 'vuex'

import app from './modules/app'
import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user
  }
})

export default store

//当前文件夹下modules/app.js
const app = { 
	state:{ }, 
	mutations:{ }, 
	actions:{ } ,
	getters:{ }
}
export default app

//当前文件夹下modules/user.js
const user= { 
	state:{ }, 
	mutations:{ }, 
	actions:{ } ,
	getters:{ }
}
export default user

对vuex模块的数据操作

//对模块的state
this.$store.state.模块名.全局数据名称
或者
computed:{
...mapState('模块名',['全局数据名称']);
}

//对模块的Mutations
this.$store.commit('模块名/方法名');
或者
computed:{
...mapMutations('模块名',['方法名']);
}

//对模块的Actions
this.$store.dispatch ('模块名/方法名');
或者
computed:{
...mapActions('模块名',['方法名']);
}

//对模块的getters
this.$store.getters.模块名.名称
或者
computed:{
...mapGetters('模块名',['名称']);
}

5. vuex原理

• 源代码地址
• 参考文章

6. vuex面试题汇总

vuex面试题汇总