安装

yarn add pinia

配置

全局配置

---main.js 
import { createPinia } from "pinia"; 
const pinia = createPinia(); 
app.use(pinia);

局部配置

---store/user.ts
import { defineStore } from "pinia"; 
// 1.定义容器 
// 参数1： 容器的ID，必须唯一，将来pinia会把所有容器挂载到根容器 
// 参数2： 选项对象 
export const userStore = defineStore("user", {   
    /**    
    * 类似于组件的data， 用来存储全局状态    
    * 1. 必须是函数，这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染   
    * 2. 必须是箭头函数，这样是为了更好的 TS 类型推导    
    * @returns  一个函数，调用得到容器实例    
    */   
    state: () => {     
        return {       
            id: "",     
        };   
    },   
/**    
    * 类似于组件的computed，用来封装计算属性，有缓存的功能    
*/  
getters: {},   
/**    
    * 类似于组件的methods，封装业务逻辑（同步，异步都可以），修改state    
*/   
actions: {     
    login(user: IUser) {       
        // 1、先清空       
        this.$reset();       
        // 2、设置全局token或覆盖掉之前的       
        setLocalStorage("token", user.token);       
        // 3、填充store内容       
        this.setUser(user);     
    },     
    loginOut() {       
        this.$reset();       
        localStorage.clear();     
    },     
    setUser(user: IUser) {       
        this.id = user.id;     
    },   
    }, 
});

使用

页面使用

---login.vue 
import { userStore } from "@/store/user"; 
const useUserStore = userStore(); 
// action和getters可以直接通过.获取使用 
useUserStore.login(user); 
// 清空
state useUserStore.$reset(); 
// 取值 
let id = useUserStore.id; 
// 赋值 
useUserStore.id = "1";

路由使用

router.beforeEach((to, from, next) => { 
    // 注意：需要在这里面申明使用，否则会报错 
    const useUserStore = userStore(); 
})