Vue学习之Vuex

基本介绍

1. Vuex是一个专为Vue.js应用程序开发的状态管理模式。
2. 当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。

核心概念

1. State
   State是唯一的数据源
   单一状态树形式

const Counter ={
	template:`<div>{{count}}</div>`,
	computed:{
	count(){
	return this.$store.state.count
	}
	}
}

3. Getters

通过Getters可以派生出一些新的状态（衍生作用）

const store = new Vuex.Store({
	state:{
	todos:[
		{id:1,text:'...',done:true},
		{id:2,text,'...',done:false}
	]
	},
	getters:{
		doneTodos:state=>{
			return state,tood.filter(todo=>todo.done)
		}
	}
})

4. Mutations（mutation里面是同步的）
   更改Vuex的store中的状态的唯一方法是提交mutation

const stroe = new Vuex.Store({
	state:{
	  count:1
	},
	mutations:{
		increment(state){
		//变更状态
		state.count++
		}
	}
})

store.commit('increment')

6. Actions
   Action提交的是mutation，而不是直接变更状态
   Action可以包含任意异步操作

const store = new Vuex.Store({
	state:{
		count:0
	},
	mutations:{
		increment(state){
			state.count++
		}
	},
	actions:{
		increment(context){
			context.commit('increment')
		}
	}
})

8. Modules
   面对复杂的应用程序，当管理的状态比较多是，我们需要将Vuex的store对象分割成模块（modules）

const moduleA={
	state:{...},
	mutations:{.....},
	action:{...},
	getters:{.....}
}

const moduleB ={
	state:{...},
	mutations:{.....},
	action:{...},
	getters:{.....}
}

const store = new Vuex.Store({
	modules:{
		a:moduleA,
		b:moduleB
	}
})

状态管理