facing-dev/vue-facing-decorator

Using pinia with vue facing decorator

Closed this issue · 1 comments

I was able to setup vue-facing decorator to my current project which was working on vue-class-component and vue-property-decorator.

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.

As I am moving the project to vue 3, I have decided to use pinia instead of vuex.

This is how I am setting up pinia.

export const useCoreStore = defineStore('core', {
  state: () => ({
    appVersion: {
      version: process.env.APP_VERSION!,
      buildTime: process.env.APP_BUILD_TIME!,
      gitCommit: process.env.APP_GIT_COMMIT_ID!,
    },
    appLocale: 'en-US',
    navCollapsed: false,
    selectedTopTabItemId: '',
    selectedNavItemId: '',
  }),
  getters: {},
  actions: {
    setAppLocale(payload: SetAppLocalePayload) {
      this.appLocale = payload.locale;
    },
    selectTopTabItem(payload: SelectTopTabItemPayload) {
      this.selectedTopTabItemId = payload.navId;
    },
    selectNavItem(payload: SelectNavItemPayload) {
      this.selectedNavItemId = payload.navId;
    },
    setNavCollapsed(payload?: SetNavCollapsedPayload) {
      this.navCollapsed = payload ? payload.collapse : !this.navCollapsed;
    },
  },
});

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 ?

It was an import issue,