vue3.2 之 pinia 基础使用

下载
- npm install pinia -S
引入（这是没有添加数据持久化的）

const app = createApp(App)
// 使用 pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
// 挂载
app.use(pinia)

store / modules / home.ts

import { defineStore } from 'pinia'

type UserInfo = {
  name:String
  age:Number
}
const changeUser = ():Promise<UserInfo> => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve({
        name:"异步-ppp",
        age: 100
      })
    },2000)
  })
}

// defineStore() 参数1：唯一值；参数2：一个对象，里面有着3个模块 state状态数据、
export const useHomeStore = defineStore( {
  id:'Home',
  state:()=>{
    return {
        user:<UserInfo>{}
      }
  },
  //类似于computed 可以帮我们去修饰我们的值
  getters:{
  },
  //可以操作异步 和 同步提交state
  actions:{
    // 同步的形式 修改 User数据
    setUser (payload:any) {
      this.user = payload
    },
    // 异步修改
    async asyncSetUser (){
      const res = await changeUser()
      this.user ={...res};
    },
  }
})

store / modules / base.ts

import { defineStore } from 'pinia'
type UserInfo = {
  name:String
  age:Number
}
const Login = ():Promise<UserInfo> => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve({
        name:"异步-0001",
        age:1000
      })
    },2000)
  })
}

// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
  id:"Base",
  state:()=>{
    return {
      baseName:"base-ppp",
      userInfo:<UserInfo>{}
    }
  },
  getters:{

  },
  actions:{
    // 异步修改
    async setUserInfo(){
      const res = await Login()
      this.userInfo = {...res};
    }
  }
})

使用 store 里面的模块

<!--
描述：
  作者：xzl
  时间：06月13日142250
-->
<template>
  <div>
    <div>
      Home.user - {{ Home.user }} - userData -{{ userData }}
    </div>
    <button @click="onlyChangeHomeName">只是修改用户名</button>
    <button @click="changeHomeName">修改Home模块的用户名</button>
    <button @click="asyncChangeHomeName">异步修改数据</button>
    <button @click="resetPinia">重置pinia中的state数据</button>
    <div style="height:100px"></div>
     <div>
      Base - {{ Base.userInfo }} - baseName - {{ baseName }}
    </div>
    <button @click="changeBaseName">修改Base模块的baseName</button>
     <button @click="changeBaseUserName">修改Base模块的userInfo</button> 
  </div>
</template>

<script setup lang="ts" >
import { reactive } from 'vue'; // 若是没有 使用自动导入的话，需要手动引入 ref等
import { useHomeStore } from './store/modules/home'
import { useBaseStore } from './store/modules/base'
import { storeToRefs } from 'pinia'
const Home = useHomeStore()
const Base = useBaseStore()
const { user } = storeToRefs(Home)
const { baseName } = storeToRefs(Base)
// console.log("baseName",baseName.value);


type UserInfo = {
  name:String
  age:Number
}
let userData = reactive<UserInfo>({
  name:"ppp",
  age:10
})


// 同步的形式 修改user 下的name数据
const onlyChangeHomeName = ()=> {
  // Test.user.name = "pink" // 解构前修改
  user.value.name = "pink" // 解构后 修改
}
// 同步的形式 修改user数据
const changeHomeName = ()=>{
  Home.setUser({...userData}) // 同步的 调用
}
// 异步
const asyncChangeHomeName = ()=> {
  Home.asyncSetUser() // 异步的 调用
}
// 重置
const resetPinia = ()=> {
  Home.$reset() // 重置 pinia 中的 state状态数据（回到最初的数据）
}
// base模块的
const changeBaseName = ()=> {
  baseName.value = "我是修改后的-name"
}
const changeBaseUserName = ()=> {
  Base.setUserInfo() // 异步的 调用
}

</script >
<script lang="ts" >
export default {
  name: 'App',
}

</script>
<style  lang="scss" scoped>
</style>

效果

在这里插入图片描述

vue3.2 之 pinia 中getters的使用

基础使用getters与调用其他getters

store / modules / base.ts


import { defineStore } from 'pinia'
type UserInfo = {
  name:String
  age:Number
}
const Login = ():Promise<UserInfo> => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve({
        name:"异步-0001",
        age:1000
      })
    },2000)
  })
}

// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
  id:"Base",
  state:()=>{
    return {
      baseName:"base-ppp",
      userInfo:<UserInfo>{},
      count:0
    }
  },
  getters:{
    // 传入 state [可选参数]的形式
    // countSum(state){
    //   return state.count + 1
    // }
    // 使用 this的形式 
    countSum():number {
      return this.count + 1
    },
    countSum2():number {
      return this.countSum + 1
    },
  },
  actions:{
    // 异步修改
    async setUserInfo(){
      const res = await Login()
      this.userInfo = {...res};
    }
  }
})

使用

     <div>
      count - {{ count }} - countSum - {{ Base.countSum }}; countSum2- {{ Base.countSum2}}
    </div>
    <button @click="addCount">修改Base模块的count</button>

import { reactive } from 'vue'; // 若是没有 使用自动导入的话，需要手动引入 ref等
import { useBaseStore } from './store/modules/base'
const Base = useBaseStore()
const { count } = storeToRefs(Base)

const addCount = ()=> {
  count.value += 1
}

效果

在这里插入图片描述

pinia数据持久化

使用插件

下载
- npm i pinia-plugin-persist --save
引入 main.ts

const app = createApp(App)
// 使用 pinia
import { createPinia } from 'pinia'
// 持久化存储pinia
import piniaPluginPersist from 'pinia-plugin-persist'
const pinia = createPinia()
pinia.use(piniaPluginPersist)
app.use(pinia)

store / modules / base.ts


import { defineStore } from 'pinia'
type UserInfo = {
  name:String
  age:Number
}
const Login = ():Promise<UserInfo> => {
  return new Promise((resolve)=>{
    setTimeout(()=>{
      resolve({
        name:"异步-0001",
        age:1000
      })
    },2000)
  })
}

// 关于 base的 pinia 状态数据
export const useBaseStore = defineStore({
  id:"Base",
  state:()=>{
    return {
      baseName:"base-ppp",
      userInfo:<UserInfo>{},
      count:0
    }
  },
  getters:{
    // 传入 state [可选参数]的形式
    // countSum(state){
    //   return state.count + 1
    // }
    // 使用 this的形式 
    countSum():number {
      return this.count + 1
    },
    countSum2():number {
      return this.countSum + 1
    },
  },
  actions:{
    // 异步修改
    async setUserInfo(){
      const res = await Login()
      this.userInfo = {...res};
    }
  },
  persist: {
    enabled: true,
    // 自定义持久化参数
    strategies: [
      {
        // 自定义key
        key: 'base_store',
        // 自定义存储方式，默认sessionStorage
        // storage: localStorage,
        // 指定要持久化的数据，默认所有 state 都会进行缓存，可以通过 paths 指定要持久化的字段，其他的则不会进行持久化。
        paths: ['count'],
      }
    ]
},
})

使用

<!--
描述：
  作者：xzl
  时间：06月13日142250
-->
<template>
  <div>
     <div>
      Base - {{ Base.userInfo }} - baseName - {{ baseName }} ;
      count - {{ count }} - countSum - {{ Base.countSum }}; countSum2- {{ Base.countSum2}}
    </div>
    <button @click="changeBaseName">修改Base模块的baseName</button>
    <button @click="changeBaseUserName">修改Base模块的userInfo</button> 
    <button @click="addCount">修改Base模块的count</button>
  </div>
</template>

<script setup lang="ts" >
import { reactive } from 'vue'; // 若是没有 使用自动导入的话，需要手动引入 ref等
import { useBaseStore } from './store/modules/base'
import { storeToRefs } from 'pinia'
const Base = useBaseStore()
const { baseName,count } = storeToRefs(Base)

// base模块的
const changeBaseName = ()=> {
  baseName.value = "我是修改后的-name"
}
const changeBaseUserName = ()=> {
  Base.setUserInfo() // 异步的 调用
}
const addCount = ()=> {
  count.value += 1
}

</script>

<script lang="ts" >
export default {
  name: 'App',
}

</script>
<style  lang="scss" scoped>
</style>

效果

手写 - 数据持久化

- [pinia数据持久化](https://blog.csdn.net/weixin_43845137/article/details/123620334)

pinia 的模块化（标准写法-推荐）

store / index.ts

import useAppStore from './modules/app'
import useHomeStore from './modules/home'

const useStore = () => ({
  app: useAppStore(),
  home: useHomeStore()
})

export default useStore

store / modules / app.ts

import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'

const useAppStore = defineStore({
  id: 'app',
  state: (): AppState => ({
    count: 0
  }),
  actions: {
    addCount(payload: number) {
      this.count = payload
    }
  }
})

export default useAppStore

store / modules / home.ts

import { AppState } from '@/types/store/app'
import { defineStore } from 'pinia'

const useHomeStore = defineStore({
  id: 'home',
  state: (): AppState => ({
    homeStr: "homeStr",
  }),
  actions: {
    changeHomeStr( payload : string) {
      this.homeStr = payload
    }
  }
})

export default useHomeStore

types / store

对store的类型做限制

types / store / app.d.ts

/**
 * 系统类型声明
 */
 export interface AppState {
  device: string;
  count: [number,string];
  sidebar: {
    opened: boolean;
    withoutAnimation: boolean;
  };
  language: string;
  size: string;
}

types / store / home.d.ts

/**
 * 系统类型声明
 */
 export interface AppState {
  homeStr: string;
}

使用

<template>
  <section class="a">
    <div>appCount - {{ appCount }}</div>
    <div>homeStr - {{ homeStr }}</div>
    <el-button type="primary" @click="btn">Primary</el-button>
  </section>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import useStore from '@/store'
const { app, home } = useStore() as any // 拿到 store的数据
const appCount = computed(() => app.count)
const homeStr = computed(() => home.homeStr)
const btn = () => {
  app.addCount(10)
  home.changeHomeStr("我是hh")
}
</script>
<style></style>