问题:vue3+vue-router4,在router中使用pinia状态管理,获取store中存储的菜单数据,好在beforeEach中判断权限。不料报错getActivePinia was called with no active Pinia. Did you forget to install pinia?

原因:是pinia在main.ts中还未注册好,便在其他文件中使用了它。

解决前已有的store相关代码,如loginStore.ts:

import { defineStore } from "pinia";

const loginStore = defineStore("login", {
  state: () => {
    return {
      userInfo: {},
      menus: [],
      roles: [],
    };
  },
  getters: {
    getUserInfo(state) {
      return state.userInfo;
    },
  },
  actions: {
    setRole(data: any) {
      this.roles = data;
    },
    setMenu(data: any) {
      this.menus = data;
    },
  },
});
export default loginStore;

解决方案

在store目录中单独创建一个store.ts:

import { createPinia } from 'pinia';
const pinia = createPinia();
export default pinia;


接着在main.ts 引入该文件,用来注册pinia:

// xxxxx省略无关代码xxxxxxx

import pinia from "@/store/store"
app.use(pinia)

// xxxxx省略无关代码xxxxxxx


router等其他外部js中使用时,需要重新导入创建pinia实例才行:

import pinia from '@/store/store' 
import { loginStore} from "@/store/loginStore"
const store = loginStore(pinia)

// store可以在本文件中随意使用
console.log(store)

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐