vuex状态管理器

.1 State

• State是唯一的数据源，是一个数据载体。所有抽取出的变量都放其中
• 单一的状态树

const Counter={
    template : `
{{count}}
`,
    computed:{
        count(){
            //当注册了vuex到全局时，this.$store就指向了全局的vuex对象
            return this.$store.state.count 
        }
    }
}

2.2 Getters

• 基于state，来处理后，返回想要的状态。如：state中存储状态count，要求count不能超过99时，可以通过getters来限制。

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

2.3 Mutations

• 用于提交更改store中的状态
• 注意：mutation是更改store中状态的唯一方法

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        increment(state){ //函数名可随意
            //变更状态
            state.count++
        }
    }
})
// 外部触发
store.commit('increment')

2.4 actions

• actions用于提交mutation，而不是直接变更状态
• actions可以包含任意异步操作
• 应用场景（mutation只能用于同步改变state，而当需要异步操作时，就可以使用actions）

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutaions:{
        increment(state){ //函数名可随意
            //变更状态
            state.count++
        }
    },
    actions:{
        increment(context){ //context为全局注册vuex时自动添加的
            context.commit('increment') // 触发mutations
        }
    }
})

2.5 Modules

• 当应用程序很大时，需要管理的状态很多时，需要将state进行拆分，分割成模块（modules)，最后统一管理

const moduleA = {
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const moduleB = {
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
}
const store = new Vuex.Store({
    state:{...},
    mutations:{...},
    actions:{...},
    getters:{...}
})