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)

3.创建store对象

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

4.创建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
		},
	}
})

5.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(){
		//触发 mutation 的第一种方式
		this.$store.commit('add')
	},
	handle2(){
		this.$store.commit('addN',3)
	}
}

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

3.Action

4.Getter

注：以上笔记都是看视频学的，之后会继续更新，也方便自身的理解和便于翻看笔记。