vue3+pinia搭建

1.用vite搭建vue3脚手架 （略）
2.安装pinia(略)
3.在src文件夹下新建stores文件夹（如图，可以用ts，这个项目我用js）

新建index.js,代码：

/**
 * pinia
 */
import { createPinia } from 'pinia';
const usePinia = createPinia(); //外部（单独）js文件导入pinia时，使用此对象进行pinia创建

//modules
import useCommonStore from './modules/common';
import useUserStore from './modules/user';

export {
	useCommonStore,
	useUserStore,
	usePinia
}

modules文件夹新建文件比如user.js,代码

/**
 * 用户相关
 */
import { defineStore } from "pinia";
import * as Router from "@/router";
import Cookies from "vue-cookies";
import $tmp from "@/assets/tmp";

const user = defineStore("user", {
  state: () => {
    return {
      //用户信息
      userinfo: {},
      //用户菜单
      usermenu: [],
    };
  },
  actions: {
    //操作token
    getToken() {
      return Cookies.get($tmp.cookies.token);
    },
    setToken(token) {
      Cookies.set($tmp.cookies.token, token, "7d");
    },
    removeToken() {
      Cookies.remove($tmp.cookies.token);
    },
    //检查是否有权限（用户为超管或者有此页面权限，或页面为公共数据）
    //item-需要检查的路由项
    hasRole(item) {
      if (
        this.usermenu[0] === "all" ||
        this.usermenu.includes(item.meta.roleId) ||
        item.meta.role === true
      ) {
        return true;
      }
      return false;
    },
    //获取登录信息
    userInit() {
      let menu = "";
      if (
      //登录账号类型 在router判断导航 具体配置看路由 放在下面
        localStorage.getItem($tmp.storge.userType) === "1"
      ) {
        menu = ["all"];
      } else {
        menu = [
          "chart",
          "chart-map",
          "chart-line",
          "chart-bar"
        ];
      }
      let data = {
        username: localStorage.getItem($tmp.storge.username),
        menu: menu,
      };
      this.userinfo = { ...data };
      this.usermenu = [...data.menu];
      //console.log('getUserInfo');
    },
    //退出登录
    userLogout(redirect) {
      //必须先清除token
      this.removeToken();
      this.userinfo = {};
      this.usermenu = [];
      //退出登录后跳转
      let path = "/login";
      if (redirect && redirect !== path) path = `${path}?redirect=${redirect}`;
      Router.default.push(path);
    },
  },
});

export default user;

4.在main.js添加stores

import 'element-plus/dist/index.css';
import './assets/css/common.scss';

import App from './App.vue';
import router from './router';
import { createApp } from 'vue';
import { usePinia } from './stores';

import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

const app = createApp(App);
app.use(usePinia);
app.use(router);
app.use(ElementPlus, { locale: zhCn });

app.mount('#app');

5.调用stores

import { useUserStore, usePinia } from "@/stores";
const userStore = useUserStore()
userStore.getToken()

6.axios搭建
7.router配置