vuex的一些思考

vuex其实就是一个升级版的eventBus，eventBus的原理很简单，就是个观察者模式，vuex的使用场景无非也是如此。
观察者模式核心的思想就是订阅和发布。订阅者通过订阅（观察）某个状态，当这个状态发生了改变时就会推送（发布）出来，让订阅者的这个状态发生变化。
比如有一个页面，进去的时候有个组件要判断一下角色，如果是普通员工就看不到，而领导可以看到。
判断角色的接口是异步的，我们刚进页面时可以给个默认值，当接口请求成功后再更新这个状态。
store.js:

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //是否是领导
        isLeader:false
    },
    mutations: {
        getLeader (state,obj) {
           
            state.isLeader = obj.isLeader//修改状态
        }
    },
    actions: {
        getLeader (context,obj) {

            context.commit('getLeader',obj)
        }
    }
})

export default store

project.vue:

<template>
    <div>
        <myheader :flag="leaderFlag"></myheader>
        <div>其他的信息</div>
    </div>
</template>

<script>
    import myheader from '@/components/myheader'
    export default {
        name: "project",
        components:{myheader:myheader},
        mounted(){
            this.getData()
        },
        methods:{
            getData(){
                setTimeout(()=>{
                    this.$store.dispatch('getLeader',{isLeader:this.isLeader})
                },1000)
            }
        },
        data(){
            return {
                leaderFlag:1,
            }
        }
    }
</script>

<style scoped>

</style>

myheader.vue

<template>
    <div>
            <div class="tab-bar" v-if="isLeader">
              <div :class="{'curr':flag===1?true:false}" class="tab" @click="swtichTab(1)">个人周报</div>
              <div :class="{'curr':flag===2?true:false}" class="tab" @click="swtichTab(2)">团队周报</div>
            </div>
            
    </div>

</template>

<script>
    export default {
        name: "myheader",
        props:{
            flag:{
                required:true,
                type:Number
            }
        },
        computed:{//注意要用computed属性，写在data里面无法读取最新状态哦~~
            isLeader(){
                return this.$store.state.isLeader
            }
        },
        methods:{
            swtichTab(flag){

                if(flag===1){

                    this.$router.replace({name:'personWeek'})
                }else if(flag===2){
                    this.$router.replace({name:'groupweek'})
                }
            }
        }
    }
</script>

<style scoped>
    .tab-bar{
        z-index:999;
        font-weight:bolder;
        width:100%;
        margin-top:7px;
        font-size:14px;
        height:40px;
        line-height:40px;
        position:fixed;
        top:0;
        left:0;
        background:#e8e8e8;

    }
    .tab{
        float:left;
        width:50%;
    }
    .curr{
        background-color:#57a3f3;
        color:#fff;
        border-radius: 30px;
    }
</style>