vuex前端vue的数据流管理框架

2018-06-14 fishedee 前端

1 概述

vue全局桶的第三部，vuex。vuex是vue全家桶的最后一部，也是最简单的一部分。

2 基础

export default {
    state:{
        count:0
    },
    mutations:{
        decrement(state){
            state.count--
        },
        increment(state){
            state.count++
        }
    },
    actions:{
        _asyncAny({commit,state,dispatch},payload){
            let action = ""
            let amount = 0;
            if( payload.amount > 0 ){
                action = "increment"
                amount = payload.amount
            }else{
                action = "decrement"
                amount = -payload.amount
            }
            for( let i = 0 ;i != amount ; i ++ ){
                commit(action)
            }
        },
        async asyncInc({commit,state,dispatch},payload){
            console.log(payload);
            if( state.count > 10 ){
                await delay(1000)
            }
            dispatch('_asyncAny',payload)
        }
    }
}

跟redva可以说是差不多了，mutations是修改state的地方，actions是触发mutations和异步操作的地方，和redva不同的是，mutations和actions的触发方式不同，一个是commit，一个dispatch。

Vue.use(Vuex)

new Vue({
    el: '#root',
    store:new Vuex.Store(Store),
    render:(createElement)=>createElement(App)
})

将store注入到vue中

export default {
    data(){
        return {
            clickCount:0,
            text:0,
        }
    },
    computed:{
        count () {
          return this.$store.state.count
        }
    },
    methods:{
        inc(){
            this.$store.commit('increment')
            this.clickCount++
        },
        dec(){
            this.$store.commit('decrement')
            this.clickCount++
        },
        onInput(){
            this.$store.dispatch('asyncInc',{
                amount:parseInt(this.text)
            })
            this.clickCount++
        }
    }
}

在使用store时就需要this.$store就可以了。另外，还有getter的概念，和computed差不多，就不啰嗦了。

3 模块化

export default {
    namespaced: true,
    
    state:{
        count:0
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
}

将store设置为namespaced=true，分割开每个store的action与mutations的触发。

export default {
    modules:{
        click,
        counter
    }
}

注入store时将各个module写入到modules中。

4 总结

vue的数据流管理框架是相当简单的，因为vue自身就是响应式的，追踪数据变动并将其同步到视图去。vuex仅仅就是将多视图共享的数据抽取出来，放到一个统一的地方，那么只需要修改一个地方的数据时，多个视图都会同步更新。

总的来说，vue相当于简约版的react+mobx，其不需要react的shouldComponentUpdate来做优化，也必不需要mobx的各种decoration。

相关文章