VUEX
是一个状态管理模式，可以集中式存储和管理组件的状态。
组件使用store里面的state作数据展示，通过dispatch action来处理异步业务逻辑，然后commit mutations处理同步业务逻辑并且更新state。
Store
const store = {
state,
mutaions,
getters,
actions,
modules
}
State
通过在跟组件中注册store，即new Vue({store})，该store实例会注入到根组件下的所有子组件中，子组件通过this.$store.state去访问属性。
// 可以通过mapState来帮我们生成计算属性
import { mapState } from 'vuex'
export default {
computed:{
aaa,
// 自己本来有computed的属性
...mapState({
count:state => state.count,
// 也可以传 'count' 等同于 'state => state.count'
'count'
}),
...mapState([
'xxx',
'yyy'
])
}
}
Getters
当多个组件需要一种清洗和过滤后的数据的时候，可以编写getters，即处理数据格式的一种方法。
// 定义一个getters，里面有个sum
const getters = {
// 也可以接收一个getters作为参数
sum:( state,getters ) => {
return state.a + state.b;
}
}
// 使用getters
computed:{
// 同样使用拓展运算符将 getters 混入 computed 对象中
xxx,
...mapGetters([
'aaa',
'bbb'
])
}
Mutations
更改Vuex中的state状态的唯一方法是commit mutation，然后在mutation中操纵state改变状态。
// 定义
const mutations = {
// 可以传入额外的参数n
[ADD](state,obj){
state.count += obj.n;
}
}
// 一般使用常量替代 mutation 事件类型
const ADD = 'ADD'
//调用,type对应方法名， 或者commit('add',10)
store.commit({
type:'add',
n:10
})
mutation必须是同步函数，也就是说所有异步请求应该都放在action中
// 使用
export default {
methods:{
...mapMutations([
// 映射 this.aaa() 为 this.$store.commit('aaa')
'aaa'
])
}
}
Action
action类似mutation，但是action是commit mutation，而不是直接改变状态，并且action可以进行异步操作。
const actions = {
//这里需要注意，入参的context是一个modules，不是Store，有store实例的相同方法和属性
aaa(context,n){
// 在action中提交一个type为aaa的mutation
context.commit({type:'mutation',n:n})
}
}
// 调用
store.dispatch({type:'aaa',n:10}); //dispatch('aaa',n)
// 使用
export default {
methods:{
...mapActions([
// 映射 this.aaa() 为 this.$store.dispatch('aaa')
'aaa'
])
}
}
Modules
一个很大的单页项目，如果所有状态都集中在一个Store上，那么这个Store就会很大，所以将store分割模块，每个模块拥有自己的state,mutation,action,getters.
const moduleA = {
state,
actions,
mutations
}
const moduleB = {
state,
actions,
mutations
}
const Store = new Vuex.Store({
modules:{
moduleA,
moduleB
}
})
Store.state.moduleA // -> moduleA 的状态
规则
- 应用层级的状态应该集中到单个 Store 对象
- 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的
- 异步逻辑都应该封装到 action 里面
- 对大型项目，需要把 Vuex 相关代码分割到模块中
