xuex 详解以及使用

1. vuex是什么?

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

小范围的数据共享:用父向子,子向父,兄弟间传值即可。如果需要频繁大范围的数据共享就用vuex

1.1使用vuex统一管理状态的好处

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

1.2 什么样的数据适合存储到vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。

2. vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import vuex from ‘vuex’
vue.use (vuex)

3.创建store对象

const store = new vuex.Store ( {
   //state中存放的就是全局共享的数据
   state: { count: 0 }
})

4.将store对象挂载到vue实例中

new vue ( {
   el: '#app',
   render: h => h (app),
   router,
  //将创建的共享数据对象，挂载到vue实例中
  //所有的组件，就可以直接从store中获取全局的数据了
   store
})

3. vuex核心概念

3.1核心概念概述
vuex中的主要核心概念:

• State
• Mutation
• Action
• Getter

3.2 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的 State中进行存储。

//创建store数据源，提供唯一公共数据
const store = new vuex.store ({
   state: { count: 0 }
))

组件访问State中数据的第一种方式:

 this.$store.state.全局数据名称

组件访问State中数据的第二种方式:

// 1．从 vuex中按需导入mapstate 函数
   import { mapstate } from 'vuex"

通讨刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性:

// 2．将全局数据，映射为当前组件的计算属性
   computed:{
     ...mapstate(['count '])
   }

3.3 Mutation
Mutation用于变更Store中的数据。

1. 只能通过mutation变更Store数据。不可以直接操作Store 中的数据。
2. 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

Mutation写法:(举一个简单的例子:state数据自增)

 const store = new Vuex.store ({
 		state:{
 			count:0
 		},
 		Mutations:{
 			add(state){
 				//变更状态
 				state.count++
 			}
 			//触发Mutation传参
 			adds(state,num){
 				state.count+=num
 			}
 		}
 })

//触发Mutation
		//第二触发Mutation方式的引入
        import [ mapMutations ] from 'vuex'
	 	metheds:{
	 	//第一种触发Mutation方式
	 		test(){
	 			this.$store.commit('add')
	 		}
	 		test2(){
	 			//commit的作用就是调用某个 Mutation函数
	 			this.$store.commit('adds',2)
	 		}
	 	
	 		//1.从vuex中按需导入 mapMutations 函数import [ mapMutations ] from 'vuex'
			//this.$store.commit('')是触发mutations的第一种方式，触发mutations的第二种方式:
	 		//第二种触发Mutation函数
	 		...mapMutation(['add','adds'])
	 		test3(){
	 		//直接this指向就可以了
	 			this.add
	 		}
	 	}

注意:Mutation不能直接使用异步操作,入过需要异步操作用action

3.4 Action
Action用于处理异步任务。

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation的方式间接变更数据。

错误写法:

	    Mutations:{
			//这样写是不对的,只是效果上有变化,但是vuex控制器没有变化
 			add(state){
 				setTimeout(()=>{
 					state.count++
 				},1000)	
 			}	
 		}

正确写法:

	const store = new Veux.store({
		State:{
			count:0
		},
		Mutations:{
			add(state,params){
				state.count+=params
			}
		},
		Action:{
			addAsync(context,params){
				setTimeout(()=>{
					//触发Action携带参数
					context.commit('add',params)
				},1000)
			}		
		}
	})

//触发Action
	metheds:{
		test(){
			this.$store.dispatch('addAsync',3)
		}
	}

注意:

1. 在Action中不能直接访问state里面的数据;
2. 必须通过 context.commit(’’)触发某个 mutation 才行;
3. 只有在Mutation中有权限修改state里面的数据;

3.5 Getter
Getter用于对Store 中的数据进行加工处理形成新的数据。

1. Getter可以对Store中已有的数据加工处理之后形成新的数据，
2. 类似Vue的计算属性。Store 中数据发生变化，Getter的数据也会跟着变化。

	const store new Vuex.store ({
		state:{
			count:0
		},
		Getter:{
			showNum: state=> {
				return '返回最新的值('+state.count+')'
			}
		}
	})

//使用方式第一种方式,直接在插值中添加
    this.$store.getters.名称
//第二种方式
	import {mapGetter} from 'vuex'
	computed:{
		...mapstate(['mapGetter']),
		...mapGetter(['showNum'])
	}

vuex的讲解就到这里结束,不懂得可以留言或私信问我