vite基础学习笔记：7.数据仓库（以用户登录获取token为例）

说明：自学做的笔记和记录，如有错误请指正

1. 安装 pinia

①参考官网

npm install pinia -s

②查询vue版本（注意vue与pinia的版本应匹配）：
打开package.json文件
找到“dependencies”属性下的“vue”依赖，查看其版本号。例如，“vue”: “^3.3.4” 表示当前使用Vue的版本号为3.3.4。

2. 数据仓库相关设置

①在src文件夹下创建store文件夹，新建index.ts文件，写以下代码

import { createPinia } from 'pinia';
//对外暴露仓库
export default createPinia();

②入口文件main.ts中引入并注册pinia

//引入pinia仓库
import pinia from './store'
//安装pinia仓库
app.use(pinia);

其中①②可以合并为

// main.ts
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
app.use(pinia)

3. 定义相关仓库

在store文件夹下新建modules文件夹，新建ts文件，如：user.ts(定义用户仓库)

//定义相关用户的仓库
import { defineStore } from "pinia";
import { reqLogin } from "../../api/index"
const useUserStore = defineStore('user', {
    //数据，注意 state 是一个函数, 函数的返回值才是真正定义的数据
    state: () => {
        return {
            token: ''
        }
    },
    //修改状态的方法
    actions: {
        async userLogin(loginData) {
            let result = await reqLogin(loginData);
            this.token = result.data.token;
        }
    },
    //计算属性
    getters: {

    }
});
//获取仓库方法对外暴露
export default useUserStore;

4.使用仓库中数据及方法

实现效果：
点击登录按钮，调用登录接口返回token赋值给数据仓库中的token