Vuex核心概念
Vuex提供了一个store单实例来管理state。在初始化store实例时,其中的选项涉及到Vuex的5个核心概念,如下
- State
- Getters
- Mutations
- Actions
- Module
State
state就是Vue应用中需要使用的所有公共数据,在Vue通常放在应用的顶层组件上,通过父子组件通信的方式进行传递和修改。
单一状态树
Vuex使用单一状态树(single state tree)。什么意思?
在Vuex中,通过store单例来管理state,也就是说,只用一个store,一个state,这就是单一的理解。
在实际应用的运行过程中,state也即应用的数据会随着与用户的交互进行变化。类似于在时间轴上,每一个时刻的state类似于一个快照,state的数据可能不同,这是对状态树的理解。
Getters
什么是Getter?
从功能上看,Getter就是根据需要,从原来组件的公共状态中派生出新的公共状态,比如过滤其中一部分。
从程序上看,Getter是一个函数,通过将组件的初始公共状态state作为第一个参数(允许:store实例的setters属性可以作为第二个参数),经过处理后,返回新的公共状态newstate。
Getter类似于数据库的查询操作,不对原始数据进行更改。
如何定义Getter?
Vuex允许我们在实例化store时,在参数中对应的getters属性中定义所有的getter。
getters属性的值为一个对象,对象中每个属性对应一个getter,每个getter的值为一个函数,函数返回值可以为新的状态或一个函数。
语法:
getters:[key:string]:Function
示例:
const store = new Vuex.Store({
state: {
//定义一个todo列表(id,需要完成的任务,是否完成)
todos: [
{ id: 1, text: '学习vue', done: true },
{ id: 2, text: '学习vuex', done: true },
{ id: 3, text: '学习vue-router', done: false }
]
},
getters: {
//state作为第一个参数:获取已经完成的事情
doneTodos: state => {
return state.todos.filter(todo => todo.done)
},
//getter 作为第二个参数:获取已经完成的事情的数量
doneTodosCount: (state, getters) => {
return getters.doneTodos.length
},
//返回一个函数:通过id获取对应id的事情。
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
})
如何访问Getter?
实例化store时所有定义的getter都将暴露给store实例的getters属性,即store.getters。
由此可知,对应返回值不是函数,直接访问相应属性即可;对应返回值为函数,访问相应属性加括号调用即可。
//属性调用
store.getters.doneTodosCount // -> 1
//方法调用
store.getters.getTodoById(2) // -> { id: 2, text: '学习vuex', done: false }
Mutations
mutation(英文:改变),设计为作为同步改变state的唯一方法。
所谓改变state,即对原始数据进行修改,类似于对数据库中的表进行修改操作。
每一个mutation有一个类型(type)和处理函数(handler)。在处理函数中,state作为第一个参数传入。
每一个mutation处理函数无法直接调用,需要通过store实例的commit方法调用。
在通过commit方法调用mutation处理函数时,可以通过payload传入额外的数据。
定义Mutations
语法
//Mutations为一个对象,里面为一个个的mutation,每个mutation为type:Function的键值对
Mutations:{[type:string]:Function}
示例
var store = new Vuex.Store({
state: {
todos: [],
filter: "all"
},
mutations: {
//添加任务
addTodo: function (state, todo) {
state.todos.unshift(todo);
},
//根据id删除完成的任务
deleteTodo:function(state,id){
state.todos.splice(state.todos.findIndex(todo=>todo.id==id),1)
},
//删除所有完成的任务
clearAllCompleted:function(state){
state.todos=state.todos.filter(todo=>!todo.completed)
}
}
});
Actions
Action与mutation基本相同,区别在以下两个方面:
- Action是通过提交mutation来改变state,而不是直接改变state
- Action可以执行异步操作,而mutation只能为同步操作
Moudle
由于只使用一个store对象来管理state,如果是一个庞大的应用,那么store会是一个比较大的对象,显得臃肿,不利于维护。
Vuex提供了Module(模块),可以将store拆分为不同的模块。
参考
说明
- 该文章同步到github:pensiveant-blog