pinia 使用

// 下载pinia
 npm install pinia

// main.ts
import { createPinia } from 'pinia'
app.use(createPinia())

// store.ts
import {defineStore} from "pinia"

export const appStore = defineStore('appStore', {
    state: () => ({
        pinia:'pinia',
    }),
    actions:{},
    getters:{}
})

// 使用
import {appStore} from '@/store/index'
const store=appStore()
store.$patch({
    "属性":"值"
  })

// pinia持久化
// 下载依赖
npm install pinia-plugin-persist
// main.ts
// 引入pinia仓库
import { createPinia } from 'pinia'
// 持久化存储pinia
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
const app = createApp(App)
app.use(store)

// store.ts

import {defineStore} from "pinia"

export const appStore = defineStore('appStore', {
    persist: {
        enabled: true, // 开启持久化
        strategies: [
            {
                key: 'Keystore', // 自定义key
                storage: sessionStorage, // 自定义存储方式，默认sessionStorage
                paths: ['pinia'], // 要持久化缓存的数据
            }
        ]
    },
    state: () => ({
        pinia:'pinia',
    }),
    actions:{},
    getters:{},
})

// tsconfig.json
// 添加
"types": [
      "pinia-plugin-persist"
    ]
// tsconfig.json文件
{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "baseUrl": ".", // 用于设置解析非相对模块名称的基本目录，相对模块不会受到baseUrl的影响
    "paths": { // 用于设置模块名到基于baseUrl的路径映射
      "@/*": ["src/*"]
    },
    "types": [
      "pinia-plugin-persist"
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}