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,