VUE情景： 一个APP，多个角色，根据角色切换导航栏（利用computed+watch、computed+getters+watch）

情景：一个APP，三种业务，6个角色，相当于将6个APP集成一个APP开发（别问我为什么着迷作，产品经理和项目经理要求的），角色太多，那么根据角色来切换导航栏，进而切换APP的效果是我觉得最容易管理的，每个角色一个版块，想要换板块就换导航，由导航指向不同的路由，但是还有一个前提是，不管是们角色他们的其他页面不同，但是个人中心是相同的。
切换导航尝试了多种方式，最后方式三和方式五是可行的(原理一样)。

备注一：以下是一个业务，两个角色，其他累加就行。
备注二：<Footer…>是我的导航组件。
备注三：以下代码均写在App.vue中
备注四：$route.meta.show是，该页面是否有导航栏
备注五：以下会出现state和localStorage，localStorage部分均可以去掉，因为。加localStorage是方便开发在网页刷新时state会清空的情况。
而在手机上，进入APP时，在欢迎界面我都会将localStorage中的role，赋给state的role，role每次改变时，又会将其存入state和localStorage，确保用户下次登录还是上次选择的角色。

方式一：利用state和localStorage的role来判断

HTML部分:

  <FooterTransportReceiver v-show="$route.meta.show && (role === 'receiver' || this.$store.state.role === 'receiver')"/>
<FooterTransportLssuer v-show="$route.meta.show && (role === 'lssuer'|| this.$store.state.role === 'lssuer')"/>

js部分：

  data () {
   
    return {
   
      role: localStorage.getItem('role')
    }
  }

vuex的dispatch是异步执行的，所以如果有用到state的地方但是又没有绑定组件的话就会导致渲染完成了但是数据没有获取到的情况

方式二：利用computed监听state和localStorage的role来判断

HTML部分：

<FooterTransportReceiver v-if="receiver"/>
<FooterTransportLssuer v-if="lssuer"/>

js部分：

  components: {
   
    FooterTransportReceiver,
    FooterTransportLssuer
  },
  computed: {
   
    role () {
   
      return this.$store.state.role
    },
    roleLocal () {
   
      return localStorage.getItem('role')