使用vue-facing-decorator整合Pinia时出现初始化访问错误

错误原因 #

你遇到的Uncaught ReferenceError: Cannot access 'useCoreStore' before initialization是因为：

• @Component装饰器的配置项（比如methods）会在组件类定义阶段就被解析执行
• mapActions(useCoreStore, [...])会直接调用useCoreStore()来获取store实例，但此时Pinia的上下文还未初始化（setup函数还没执行），导致触发初始化顺序错误

正确整合方式 #

方法一：在setup中直接绑定actions到组件实例

无需使用mapActions，直接在setup内将store的actions挂载到组件实例：

import { useCoreStore } from '@/core';
import { Component, Vue } from 'vue-facing-decorator';

@Component
class AppHeader extends Vue {
  setup() {
    const store = useCoreStore();
    // 将actions绑定到组件实例
    this.setNavCollapsed = store.setNavCollapsed.bind(store);
    
    // 若需要访问state，可返回供模板使用
    return { navCollapsed: store.navCollapsed };
  }
}

方法二：使用Vue-Facing-Decorator的@Store装饰器（推荐）

Vue-Facing-Decorator提供了专门的@Store装饰器来集成Pinia，无需手动调用useCoreStore：

import { useCoreStore } from '@/core';
import { Component, Vue, Store } from 'vue-facing-decorator';

@Component
class AppHeader extends Vue {
  // 通过@Store装饰器注入store实例
  @Store(useCoreStore)
  coreStore!: ReturnType<typeof useCoreStore>;

  // 直接通过this.coreStore调用actions和访问state
  toggleNav() {
    this.coreStore.setNavCollapsed(!this.coreStore.navCollapsed);
  }
}

方法三：在setup中使用mapActions映射

如果一定要用mapActions，需要在setup函数内完成映射并挂载到组件实例，而非@Component的methods配置中：

import { useCoreStore } from '@/core';
import { mapActions } from "pinia";
import { Component, Vue } from 'vue-facing-decorator';

@Component
class AppHeader extends Vue {
  setup() {
    const store = useCoreStore();
    // 映射指定actions
    const mappedActions = mapActions(store, ["setNavCollapsed"]);
    // 将映射后的actions挂载到组件实例
    Object.assign(this, mappedActions);

    return { store };
  }
}

内容的提问来源于stack exchange，提问作者bhanu