VUEJS vuex 无法显示 API 在下拉导航项上获取数据

Question

我正在尝试在我的 VUEJS 应用程序上使用 VUEX 从 API 获取数据，并在下拉导航项中显示名称，所选名称将显示在下拉导航项中， 但不知何故无法显示，这是我的代码

商店/index.js

export default new Vuex.Store({
   state: () => ({
     users: [
       {
         name: '',
         email: ''
       }
     ]
   )},
   mutations: {
     getAllUsers(state, userList) {
       state.users = userList
     }
   },
   actions: {
     async fetchAllUsers({ commit }) {
       const res = await axios.get('https://jsonplaceholder.typicode.com/users')
       commit('getAllUsers', res.data)
     }
   },
})

导航栏.vue

<b-navbar-nav>
   <b-nav-item-dropdown :text="userName" >
      <b-dropdown-item 
        v-for="(user, i) in userListApp" 
        :key="i"
        @click="selectedName(user)"
      >
      {{ user.name }} </br>
      {{ user.id }}
      </b-dropdown-item>
   </b-nav-item-dropdown>
</b-navbar-nav>


<script>
export default {
  data() {
    return {
      selectedName: null,
    }
  },
  computed: {
    userListApp() {
      return this.$store.state.users;
    },
    userName() {
      const userApp = this.$store.state.users;
      return userApp.name && userApp.id ? `${userApp.name} (${userApp.id})` : null
    }
  },
  methods: {
     selectedName(user) {
       if (user.name !== this.selectedName) {
         this.selectedName = user.name
       }
     }
  }
}
</script>

我在这里错过了什么，我无法在下拉导航项中显示名称？有人注意到了吗？