67.vue2.0学习 —— vuex

vuex是什么

  专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

Github地址: https://github.com/vuejs/vuex

什么时候使用Vuex

1. 多个组件依赖于同一状态
2. 来自不同组件的行为需要变更同一状态

Vuex工作原理图

vuex核心概念和API

state

1. vuex管理的状态对象
2. 它应该是唯一的
3. 示例代码：

   const state = {
        
        
   	xxx:initValue
   }
   

actions

1. 值为一个对象，包含多个响应用户动作的回调函数

2. 通过commit( ) 来触发mutation中函数的调用, 间接更新state

3. 如何触发actions中的回调？
   在组件中使用: $store.dispatch('对应的action回调名') 触发

4. 可以包含异步代码（定时器, ajax等等）

5. 示例代码：

   const actions = {
        
        
   	zzz ({
         
         commit,state},data) {
        
        
   		commit ('yyy',{
        
        data})
   	}
   }
   

mutations

1. 值是一个对象，包含多个直接更新state的方法
2. 谁能调用mutations中的方法？如何调用？
   在action中使用：commit('对应的mutations方法名') 触发
3. mutations中方法的特点：不能写异步代码、只能单纯的操作state
4. 示例代码：

   const mutations = {
        
        
   	yyy (state,{
         
         data}) {