Vuex getters获取组件中的用户角色

// store.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    userRole: 'guest' // 默认角色为guest
  },
  getters: {
    getUserRole: state => {
      return state.userRole;
    }
  }
});

export default store;

// MyComponent.vue
<template>
  <div>
    <p>User Role: {{ userRole }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['getUserRole']),
    userRole() {
      return this.getUserRole;
    }
  }
};
</script>