ouatterrir-app/src/components/block/UserTools.vue

<template>
  <div id="user-tools">
    <a class="mdi mdi-account" href="/user">
      <span>{{ name }}</span>
      <!-- <span v-else>{{ mail }}</span> -->
    </a><br/>
    <a href="/user/logout"
      @click.prevent="onLogout()"
      class="mdi mdi-logout"
      title="logout"
    >logout</a>
  </div>
</template>

<script>
import { mapState } from 'pinia'
import { UserStore } from '@/stores/user'


export default {
  setup() {
    const userStore = UserStore()

    return { userStore }
  },
  computed: {
    ...mapState(UserStore,['isloggedin', 'mail', 'name'])
  },
  methods: {
    // ...mapActions({
    //   userLogout: 'User/userLogout'
    // }),
    onLogout () {
      console.log('UserTools onLogout')
      this.userStore.userLogout().then(() => {
        console.log('UserTools user logged-out then')
      })
    }
  }
}
</script>

<style lang="css" scoped>
</style>