pinia使用

2.项目中导入pinia

import { createApp } from 'vue'
import App from './App.vue'
import import{ createPinia } from 'pinia'//需要注意的是从pinia中结构出来的createPinia是一个函数,挂载需要先调用执行
const app = createApp(App)
app.use(createPinia())
app.mount('#app')

3.配置状态管理专用文件，在根目录下创建一个store文件，并新建一个hello.ts文件

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { User } from '@/type/user'

export const useUserStore = defineStore(
  'user',
  () => {
    // const user=ref<User>()
    //as 断言 解决数据没返回之前默认空报错
    const user = ref({} as User) //全局变量
    //方法
    //1.存储用户信息
    const setUser = (userData: User) => {
      user.value = userData
    }
    //2.删除
    const delUser = () => {
      user.value = {} as User
    }
    function getUserData() {
      setTimeout(() => {
        user.value = {
          id: 1,
          name: '王五',
          avatar: 'http'
        }
      }, 200)
    }

    //测试
    const test=ref(1)
    const changeTest = (val: number) => {
       test.value=val
    }

    return {
      user,
      setUser,
      delUser,
      getUserData,
      test,
      changeTest
    }
  },
/*   {
    //默认存储所有数据，以store的ID作为存储的key
    persist: true //开启数据持久化
  } */
  {
    persist: {
    //自定义存储的kye，指定存储数据
      key: 'GGBoy',
      paths:['test']  //数组内放入变量名都会持久化存储
    }
  }
)

4.pinia 本地存储插件  

安装命令：pnpm i pinia-plugin-persistedstate
      npm i pinia-plugin-persistedstate
      yarn add pinia-plugin-persistedstate
//第三项参数开启数据持久化
 export const useUserStore =defineStore('id',()=>{},{ persist:true //开启数据持久化})

 5.模块化

stores/index.ts

import { createPinia } from "pinia";
//引入pinia持久化
import persis from 'pinia-plugin-persistedstate'
//创建实例
const pinia = createPinia()
//注册持久化
pinia.use(persis)
//导出
export default pinia

min.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
//导出pinia实例
import pinia from './stores'
const app = createApp(App)
//注册pinia实例
app.use(pinia)
app.use(router)
app.mount('#app')