vue3项目中使用pinia

1 安装pinia

yarn add pinia

2 新建store文件夹

3 新建userInfo.ts文件

import { defineStore } from 'pinia'
export const userStore = defineStore({
    id: 'userInfo',  // 命名，唯一
    state: () => {
        return {
            userInfo: {
                id: 1,
                age: 12,
                name: 'tom'
            },
            count: 12
        }
    },
    getters: {// 显示state中的数据
        // 函数接收一个可选参数：state状态对象
        count10(state) {
            return state.count
        },
    },
    // 开启数据缓存
    persist: {
        enabled: true,
    },
    actions: {
        setUserInfo(data: any) {
            // 可直接通过this访问state属性
            this.userInfo = data;
        },
        addCount(num: number) {
            this.count += num
        }
    }
})

4 main文件中use pinia

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from 'axios'
import { createPinia } from 'pinia';// 引入
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia = createPinia();// create
pinia.use(piniaPluginPersist);
const app = createApp(App);
app.use(pinia)// use pinia

app.mount('#app')
app.config.globalProperties.$axios = axios;  //配置axios的全局引用

5 使用pinia

import { userStore } from "@/store/userInfo";// 引入

        const userstore = userStore();
        counts.value = userstore.count10;// 获取对应数据
        let addCounts = () => {
            userstore.addCount(10);// 修改数据
        }