Vue3中使用Pinia(封装并统一导出)

1.创建vue项目

pnpm create vue

npm init vue@latest

2.安装持久化插件

pnpm add pinia-plugin-persistedstate -D

3.mian.js中导出pinia 默认vue已经导入

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import pinia from "@/store/index";
const app = createApp(App)

app.use(pinia)

app.mount('#app')

4.创建store目录

user模块

import { defineStore } from "pinia";
import { ref } from "vue";
export const uerStore = defineStore('Big-user', () => {
    const token = ref('')
    const token222 = ref('')
    const userinfo=ref({
        name:'',
        age:0
    })
    const settoken = (newtoken) => {
        token.value = newtoken
        token222.value = newtoken
    }
    const removetoken = () => {
        token.value = ''
    }
    const setuserinfo=()=>{
        userinfo.value={
            name:'小明',
            age:20
        }
    }
    return {
        token, settoken, removetoken, token222,userinfo,setuserinfo
    }
}, {
    persist: true
})

index.js模块

import { createPinia } from 'pinia'
import persist from "pinia-plugin-persistedstate";
const pinia = createPinia()
pinia.use(persist)
export default pinia
export * from './modules/user' // 接收user 模块的所有的按需导出

5.在页面中使用pinia仓库

<script setup>
// 导入仓库 根路径即可
import { uerStore } from "@/store";
// 创建仓库实例
const stores = uerStore()
// 登陆
const loginhandle = () => {
  stores.settoken('eweee')
}
// 退出
const outhandle = () => {
  stores.removetoken()
}
// 设置用户信息
const setuseinfohandle = () => {
  stores.setuserinfo()
}

</script>

<template>
  <div>
    <p>{{ stores.token }}</p>
    <button @click="loginhandle">登陆</button>
    <button @click="outhandle">退出</button>
    <button @click="setuseinfohandle">设置用户信息</button>
  </div>
</template>