Using pinia with vue facing decorator throwing "Uncaught ReferenceError: Cannot access 'useCoreStore' before initialization"

Question

In my vue-facing decorator to my current project I am having issue setting up pinia

My component looks like the sample mentioned here: https://facing-dev.github.io/vue-facing-decorator/#/en/quick-start/quick-start?id=introduction

I checked decorators like @Setup is working completely fine which confirms that vue-facing decorator is correctly setup.

This is how I am setting up pinia.

export const useCoreStore = defineStore('core', {
  state: () => ({
    navCollapsed: false,
  }),
  getters: {},
  actions: {},
});

In the component

import { useCoreStore } from '@/core';
import { mapActions } from "pinia";

@Component({
  setup() {
    const store = useCoreStore();
    debugger;
    return { useCoreStore: store };
  },
  methods: {
    ...mapActions(useCoreStore, [ "setNavCollapsed" ])
  }
})
class AppHeader extends Vue {

When I run this in my browser, I get the error like and the it doesn't get to debugger. Uncaught ReferenceError: Cannot access 'useCoreStore' before initialization

If I comment out mapActions.

//...mapActions(useCoreStore, [ "setNavCollapsed" ])

I can see my debugger getting hit.

What's the correct way to use pinia with vue-facing-decorator package ?

Answer 1

It was an import issue.

Instead of accessing the store @/core I had to use @/core/core.store;