Trouble referencing this.store via computed properties & methods

[timusus]

Hi there,

I'm having trouble referencing a Pinia store from a Vue component:

<template>
  <div class="col">
    <div class="row justify-content-end p-4 pe-5">
      <div class="circle">{{ firstInitial }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import {useUserStore} from "@/stores";

export default {
  setup() {
    const userStore = useUserStore();
    return {store: userStore}
  },
  computed: {
    firstInitial(): string {
      return this.store.user?.name?.charAt(0) ?? ""
    },
  },
}
</script>

This fails to build, with the following message:

ERROR in src/components/NavigationBar.vue:21:19
TS2339: Property 'store' does not exist on type '{ firstInitial(): string; }'.
    19 |   computed: {
    20 |     firstInitial(): string {
  > 21 |       return this.store.user?.name?.charAt(0) ?? ""
       |                   ^^^^^
    22 |     },
    23 |   },
    24 | }

I think this has something to do with the lang="ts" present in <script>. I'd prefer to use TypeScript if possible, as I do like using strong types where I can.

The store looks like so:

import { defineStore } from "pinia";
import { User } from "@/user";

export const useUserStore = defineStore({
  id: "userStore",
  state: () => {
    return {
      user: null as User | null,
      authenticating: true,
    };
  },
  actions: {
    setUser(user: User | null) {
      this.user = user;
      this.authenticating = false;
    },
  },
});

And in the main.ts, Pinia is initialised:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
..

createApp(App)
  .use(createPinia())
  .use(router)
  .mount("#app");

Any assistance would be greatly appreciated.

[dreambo8563]

@timusus you can move computed into setup, that will be works. or remove 'this'
if you must use it out of setup, you can follow the doc here https://pinia.vuejs.org/cookbook/options-api.html#giving-access-to-the-whole-store

[3zzy]

@dreambo8563 If I'm using Options API, I'm unable to reference the store in another computer property. For example:

computed: {
    // note we are not passing an array, just one store after the other
    // each store will be accessible as its id + 'Store'
    ...mapStores(useCartStore, useUserStore),
    activeUsers() { return this.userStore.users.filter(u => u.isActive) }
  },