Vuex

最新推荐文章于 2024-09-22 18:59:52 发布

转载最新推荐文章于 2024-09-22 18:59:52 发布 · 200 阅读

vue 专栏收录该内容

19 篇文章

订阅专栏

博客介绍了Vuex的核心概念，包括唯一数据源State、可派生新状态的Getters、更改状态的唯一方法Mutations、可包含异步操作且提交Mutation的Actions，以及用于分割store对象的Module，帮助开发者掌握Vuex状态管理。

核心概念：

1. State(掌握)

State是唯一的数据源
单一状态树

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

2. Getters

通过Getters可以派生出一些新的状态

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

//外部调用
this.$store.getters.doneTodos

3. Mutaitons（掌握）

更改 Vuex的store中的状态的唯一方法是提交Mutation

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

//外部触发调用
store.commit('increment')

4. Actions

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

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

//调用
this.$store.dispatch('increment')

5. Module

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

const moduleA ={
	state:{.....},
	mutaitons:{....},
	actions:{.....},
	getters:{......}
}
const moduleB ={
	state:{.....},
	mutaitons:{....},
	actions:{.....},
	getters:{......}
}
const store = new Vuex.Store({
	modules:{
		a:modulesA,
		b:modulesB
	}
})