VueX 学习笔记 记录

vuex学习全面

一、组件之间的数据共享方式

1. 父向子传值 v-bind 属性绑定
2. 子向父传值 v-on 事件绑定
3. 不相干组件 EventBus $on 接受数据的组件 $emit 发送数据的组件

二、vuex是什么

1. vuex是实现组件全局状态（数据）管理的一种机制，可以实现组件之间的数据共享。
2. vuex的好处：
   2.1 能够在vuex中集中管理共享数据，易于后期开发
   2.2 能够高效的实现组件之间的数据共享，提高开发效率
   2.3 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
3. 什么样式数据适合存vuex中？
   一般情况下，只有组件之间共享的数据 ，菜有必要存到vuex中，对于组件的私有数据，依旧存储在组件自身的data中就可。

三、vuex的基本使用

1. 安装vuex依赖包
   npm install vuex -- save
2. 导入vuex包
   import Vuex from ‘vuex ’
Vuex.use(Vuex)
3. 创建store对象

   cosnt store = new Vuex.store({
    	// state 中存放的全局共享数据
   	state:{ count : 0 } 
   })
   

4. 挂载到vue中

四、vuex的核心概念

1. state
   1.1 state提供唯一的公共数据源，所有共享的数据都要统一放到store的state中进行存储
   1.2 组件访问state中数据对的 第一种方法
   this.$store.state.需要共享的数据名称( $this.store.state.xx)
   1.3 组件访问 state数据 的第二种 方法

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

通过上方导入的mapState函数 ，将当前组件需要的全局数据 ，映射为 当前组件的computed 计算属性

//  2. 将全局数据，映射为 当前组件 的计算属性
   computed :{
	...mapState ({ ' 需要映射的共享数据名称 ( xx )  '})
	}

2. Mutation
   2.1 Mutation 用于变更Store中的数据
   1. 只能通过 mutation 来变更 state数据， 不可以直接操作state中的数据
   2. 可以集中监听所有数据的变化

 // 定义 Mutation
  const  store =  new Vuex.Store ({ 
   	// 当前mutations 的形参 对象
		state：{  
			count：  0
		 }，
		 mutations ：{
			add（state）{
				// 变更状态
				state.count++ 
				}
		}，
	})

2.2. 使用的方法2 ： 在methods中调用`

methods :{
	方法名（）{
	this.$store.commit(' muttions 中的需要调用的函数名（如上面的add）')
	}
}

2.3. 触发mutation 时传递参数 ：

// mutation 定义
     const  store =  new Vuex.Store ({ 
  	// 当前mutations 的形参 对象
   	state：{  
   		count：  0
   	 }，
   	 mutations ：{
   		add1（state , step ）{
   			// 变更状态
   			state.count += step   
   			}
   	}，
   	// 在子组件中调用方法 
   	methods :{
   方法名（）{
   this.$store.commit(' muttions 中的需要调用的函数（add1）， 3 ')
   }
}
   })

3.Action
注： 不可以在mutation 中使用异步操作

1. 第一种触发方式 ： 如果通过异步操作变更数据，必须通过Action ，而不能使用mutation 但在action中还是要通过触发mutation的方式来间接的改变数据
   在mutation 同级下 写actions 且在actions 中使用异步代码就可以了
   如图：

只有在mutations 才可以修改 state 且只能用 dispatch才可以调用mutation方法

触发actions 异步任务是携带参数：


2. 第二种触发方式 ：

3. Getter
Getter 用于对state中的数据进行加工处理形成新的数据，并且getter不会改变state中的原数据
3.1 getter 可以对 store 中 已有的数据加工处理之后形成新的数据 类似vue的计算属性
3.2 store 中的数据发生变化 ， getter 的数据也会跟着变化

 	// 第一种使用
	this.$store.state.xx (xx : getters中需要的函数)

第二种使用方式：