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("夏侯惇"); }

  

 

posted @ 2023-06-05 16:37  大楚打码人  阅读(22)  评论(0编辑  收藏  举报