vue3+ts+vite pinia的集成与使用 第六回

#安装pinia
npm install  pinia

#安装持久化插件
npm install  pinia-plugin-persist 

　　1.接下来修改我们的main.ts

import { createPinia } from "pinia";
// pinia 数据持久化
import piniaPluginPersist from 'pinia-plugin-persist'

const pinia = createPinia();
pinia.use(piniaPluginPersist);

　　2.使用pinia

app.use(pinia).mount('#app')

　　3.紧接着在我们工程的store目录下新建一个piniaTest.ts

import { defineStore } from 'pinia';

interface userDetail{
  weight:string
  height:number
  bloodType:string
  gender:string
  rank  :string
}


export interface UserData<T> {
  name: string
  age: number
  no:number
  detail:T
}
export const  userStore = defineStore('main', {
  state: (): UserData<userDetail> => ({
    name: '典韦', 
    age: 45, 
    no:1,
    detail:{
      weight:'80kg',
      height:186,
      bloodType:'A',
      gender:'男',
      rank:'虎贲中朗将'
    }
  }),
  getters: {
    getName(user) {
      return user.name
    }
  },
  actions: {
    hanldeSetName(val:string) {
      this.name=val
    },
    handlerSetUserDetail(val:userDetail){
      this.detail=val
    }
  },
  persist: { // 如果不需要缓存去掉这行即可，将enabled改为false，当时就会报错的，你会看到的。
    enabled: true, // 开启数据缓存
  }
})

　　4. 使用

使用的时候只需要

import {userStore} from '@/store/piniaTest' 
　　 const useStore = userStore();
    const setNameHandler = () => {
      useStore.hanldeSetName("夏侯惇");
   }