Pinia组合式API使用详解

Pinia组合式API使用详解

引用

CSDN

1.

https://blog.csdn.net/LiliRush/article/details/140854304

Pinia是Vue生态系统中一个非常流行的状态管理库，它提供了组合式API，使得状态管理更加灵活和强大。本文将通过具体的代码示例，详细介绍如何使用Pinia的组合式API进行状态管理。

1. 创建Pinia实例并配置持久化插件

在stores/index.ts文件中，我们首先需要创建Pinia实例，并配置持久化插件：

import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'

export const pinia = createPinia()

// 把自动存储持久化挂载到pinia上
pinia.use(persist)

// 统一导出从本页面，在用时就可以直接导入本页
export * from './modules/user'
export * from './modules/consult'

2. 定义模块

接下来，在stores/modules/consult.ts文件中，我们定义了一个名为Consult的store模块：

import { defineStore } from 'pinia'
import { ref } from 'vue'
import type { NewConsult, IllnessType } from '@/types/consult'
import type { ConsultType } from '@/enum/index'

// defineStore('数据中心名'，()=>{放变量和方法})
export const useConsultStore = defineStore(
  'Consult',
  () => {
    // 数据中心变量值
    const Consult = ref({} as NewConsult)

    // 存选择的专家还是普通
    const ConsultType = (type: ConsultType) => {
      Consult.value.type = type
    }

    // 3； 设置极速问诊级别
    const setIllnessType = (type: 0 | 1) => (Consult.value.illnessType = type)

    // 4. 设置科室
    const setDep = (id: string) => (Consult.value.depId = id)

    // 5. 设置病情描述
    const setIllness = (illness: IllnessType) => {
      Consult.value.illnessDesc = illness.illnessDesc
      Consult.value.illnessTime = illness.illnessTime
      Consult.value.consultFlag = illness.consultFlag
      Consult.value.pictures = illness.pictures
    }

    // 6. 设置患者
    const setPatient = (id: string) => (Consult.value.patientId = id)

    // 7. 设置优惠券
    const setCunpon = (id?: string) => (Consult.value.couponId = id)

    // 8. 清空记录
    const clear = () => (Consult.value = {})

    // 导出
    return {
      Consult,
      ConsultType,
      setIllnessType,
      setDep,
      setIllness,
      setPatient,
      setCunpon,
      clear
    }
  },
  // 持久化，存到本地
  { persist: true }
)

3. 在组件中使用Pinia store

在需要使用Pinia store的组件中，可以通过以下方式导入并使用：

import { useUser } from '@/stores'

const store = useUser()
store.user?.token

总结

通过以上步骤，我们可以看到Pinia的组合式API使用起来非常灵活。在实际开发中，还可以使用computed计算属性来创建getter，使用async/await来处理异步操作。Pinia的这些特性使得状态管理变得更加简单和直观。