Vuex

• vuex是专门为vuejs开发的状态管理模式。

• 它采用集中式存储管理应用的所有组件的状态。

• 它具有响应式特性。

使用

1. 安装

   npm install vuex --save
   

2. store目录的index.js(推荐该目录结构)中使用Vue.use(Vuex)，创建Vuex的对象store，导出store对象。

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   const store = new Vuex.Store({
   // state中的属性就是共享状态
   	state:{
   count:21
   	}
   })
   
   export default store
   

3. 在main.js中挂载store。(挂载后全局可用$store)

   import Vue from 'vue'
   import App from './App.vue'
   import store from './store'
   
   new Vue({
     store,
   render: h => h(App)
   }).$mount('#app')
   

4. 使用$store.state.count就可以取到count属性。

   {{$store.state.count}}
   

Vuex核心概念

• State：用于保存共享状态。

• Getters：类似于计算属性。

• Mutation：用于处理修改共享状态操作。

• Action：用于处理异步操作。

• Module：根据模块进行数据保存。

• State单一状态树：既单一数据源，Vuex推荐只有一个store，所有状态都使用一个store管理。

Getters

• getters和computeds相似，返回逻辑处理后的数据。

  // store/index.js
  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  const store = new Vuex.Store({
  	state:{
  		students:[
  			{id:1,name:'zhangsan',age:18},
  			{id:2,name:'lisi',age:20},
  			{id:3,name:'wangwu',age:22},
  		]
  	},
  	getters:{
  		stu(state){
  			return state.students.filter(s => s.age >= 21)
  		}
  	}
  })
  
  export default store
  
  // views/Demo.vue
  

  {{$store.getters.stu}}

  


• getters中的函数有两个默认参数，state和getters。

  const store = new Vuex.Store({
  state:{
  students:[
  			{id:1,name:'zhangsan',age:18},
  			{id:2,name:'lisi',age:20},
  			{id:3,name:'wangwu',age:22},
  		]
  	},
  getters:{
  		stu(state){
  return state.students.filter(s => s.age >= 20)
  		},
  		stufilter(state,getters){
  return getters.stu.length
  		}
  	}
  })
  

• 如果需要给getters的方法传递参数，则getters中的方法应该返回一个函数。

  //store/index.js
  const store = new Vuex.Store({
  	state:{
  		count:8,
  		students:[
  			{id:1,name:'zhangsan',age:18},
  			{id:2,name:'lisi',age:20},
  			{id:3,name:'wangwu',age:22},
  		]
  	},
  	getters:{
  		stum(state){
  			return function(age){
  				return state.students.filter(s => s.age >= age)
  			}
  		}
  	}
  })
  
  // Demo.vue
  

  {{$store.getters.stum(21)}}

  


Mutation状态更新

• mutation用于状态的更新，通过mutation更新的数据可以用devtools跟踪。(Vuex的store状态的更新唯一方式)

• 修改vuex中属性时，推荐通过$stroe.commit('methodname')提交修改，在Vuex对象mutation属性里写methodname方法。(该方法默认会有state参数传递)

  // Demo.Vue
  

  
vuex中的数据：{{$store.state.count}}+-
  


// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
state:{
count:21
},
mutations:{
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
})

export default store


• Mutation主要包括两个部分：字符串的事件类型(type)。回调函数(handler)，回调包含的第一个参数是state。

• Mutation定义方式。

  mutations:{
  	increment(state){
  		state.count++
  	},
  	decrement(state){
  		state.count--
  	}
  }
  

• 通过mutation更新。

  inc(){
  this.$store.commit('increment')
  },
  

• mutation携带参数(payload)。

  // store/index.js
  add(state,num){
  	state.count += num
  }
  
  // Demo.vue
  add(num){
  this.$store.commit('add',num)
  }
  

• mutation参数传递方法二。

  // store/index.js
  add(state,payload){
  // 此时的payload接收到的是整个传过来的参数对象。
  console.log(payload)
  }
  
  // Demo.vue
  add(num){
  // type填写的就是事件类型。
  this.$store.commit({
  type:'add',
  age:20
  			})
  }
  

• 官方推荐写mutation时使用常量命名(避免输入出错)。

  // store/mutation-type.js
  export const INCREMENT = 'increment'
  
  // store/index.js
  const store = new Vuex.Store({
  	state:{
  		count:8
  	},
  	mutations:{
  		[INCREMENT](state){
  			state.count++
  		}
  	}
  })
  
  // views/Demo.vue
  
  

数据的响应式原理

• 响应式系统采用观察者模式，具有响应式的数据会加入响应式系统，响应系统会监听数据变化，当属性发生变化时，会通知所有界面中用到该属性的地方刷新。

• 属性具有响应式前提一：提前在store中初始化所需的属性。

• 属性具有响应式前提二：添加新属性时使用Vue.set，删除时使用Vue.delete()，这样该属性就具有响应式。

  //添加
  Vue.set(修改的对象，操作的key或number，更改后的值)
  //删除
  Vue.delete(修改的对象，删除的key或number)

【学习进度一览】