vuex学习笔记之你知不知

1.组件之间共享数据的方式：

1. 父向子传值：v-bind(简写：)
2. 子向父传值：v-on（简写@）
3. 兄弟组件共享数据：EventBus

   $on接受数据的那个组件
   $emit发送数据的那个组件

2.使用vuex统一管理状态（又称数据）的好处

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

3.什么样的数据适合存储到vuex中

1. 组件之间共享的数据，才有必要储存到vuex中。

4.Vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

5.Vuex创建和定义

1.创建store对象

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

2.创建Mutation对象

只能通过Mutation变更Store数据，不可以直接操作Store中的数据
虽然这种方式操作繁琐，但是可以集中监控所有数据的变化

const store = new Vuex.Store({
    
    
	//store中存储的就是全局共享的数据
	state:{
    
    
		count:0
	},
	//定义Mutation
	mutations:{
    
    
		add(state){
    
    
			//变更状态
			state.count++;
		},
		//传递参数step
		add(state,step){
    
    
			state.count += step
		},
	}
})

3.定义Action

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

//定义Action
const store = new Vuex.Store({
	//store中存储的就是全局共享的数据
	state:{
		count:0
	},
	mutations:{
		add(state){
			state.count++
		}
	},
	actions:{
		addAsync(context){
			setTimeout(()=>{
				//在actions中，不能直接修改state中的数据
				//必须通过context.commit()触发某个mutation才行
				context.commit('add')
			},1000)
		}
	}
})

4.定义Getter

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

//定义Getter
const store = new Vuex.Store({
	//store中存储的就是全局共享的数据
	state:{
		count:0
	},
	mutations:{
		add(state){
			state.count++
		}
	},
	actions:{
		addAsync(context){
			setTimeout(()=>{
				//在actions中，不能直接修改state中的数据
				//必须通过context.commit()触发某个mutation才行
				context.commit('add')
			},1000)
		}
	},
	getters:{
		showNum:state=>{
			return '当前最新的数量是['+state.count+']'
		}
	}
})

6.Vuex的核心概念-访问

Vuex中的主要核心概念如下

• state
• Mutation
• Action
• Getter

1.State

• 组件访问state中数据的第一种方式

// count是state定义了的数据
this.$store.state.count

• 组件访问state中数据的第二种方式

//1.从vuex中按需导入 mapState 函数
import {
    
     mapState } from 'vuex'

- 通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：
//2.将全局数据，映射为当前组件的计算属性
computed:{
    
    
 	// 映射 this.count 为 store.state.count
 	// 使用（...）对象展开运算符将此对象混入到外部对象中
	...mapState(['count'])
}

2.Mutation

• 组件访问Mutation中数据的第一种方式

methods:{
    
    
	handle(){
    
    
		//commit的作用，就是调用mutation函数
		this.$store.commit('add')
	},
	handle2(){
    
    
		this.$store.commit('addN',3)
	}
}

• 组件访问Mutation中数据的第二种方式

// 1.从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法

// 2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
	//add代表的是我们要装配的方法，addN是代表的vuex里面的mutations函数，这个...mapMutations([  'add' ])就自动帮你装配为重名的
	...mapMutations({  'add':'addN' })
}

3.Action

• 组件访问Action中数据的第一种方式

methods:{
    
    
	//异步让count自增+1
	handle(){
    
    
		//这里的dispatch函数，专门用来触发action
		this.$store.dispatch('addAsync')
	},
	handle2(){
    
    
		this.$store.commit('addN',3)
	}
}

• 组件访问Action中数据的第二种方式

// 1.从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'

通过刚才导入的mapActions函数，将需要的actions函数，映射为当前组件的methods方法

// 2.将指定的actions函数，映射为当前组件的methods函数
methods:{
	...mapActions({  'addAsync':'addN' })
}

4.Getter

• 组件访问Getter中数据的第一种方式

this.$store.getters.名称

• 组件访问Getter中数据的第二种方式

// 1.从vuex中按需导入mapActions函数
import { mapGetters } from 'vuex'

computed:{
	...mapGetter([  'showNum' ])
}