Pinia的使用

Pinia的基本使用

1.安装 pinia

npm install pinia

2.在 main.ts中配置

import { createPinia } from "pinia";
app.use(createPinia());

3.创建一个pinia实例 defineStore() 返回一个函数

defineStore 接收两个参数：

第一个参数：实例唯一标识（实例名称）

第二个参数: 配置对象 包含:
state: 函数，返回一个对象，对象中定义数据
getters：对象，类似于computed 内部通过this可以指向 当前 实例对象 里面的值可以相互调用
actions：对象 ， 里面配置一些方法 实例可直接调用 里面的方法可以相互调用

import { defineStore } from 'pinia'
export const useTextPinia = defineStore('Text', {
  // 定义实例数据
  state() {
    return {
      id: 1,
      name: '张三'
    }
  },
  //类似于computed 可以帮我们去修饰我们的值
  getters: {
    newName() {
      return this.name
    }
  },
  //可以操作异步 和 同步提交state
  actions: {
    setId() {
      // this 指向当前 store实例
      // console.log(this);
      this.id++
    }
  }
})

4.使用 pinia 实例

实例可以直接使用里面的值和方法

直接解构 pinia 实例中的数据不具有响应式，可以使用 pinia 提供的 storeToRefs 方法将数据变为响应式的ref对象

<template>
  <div>响应式：pinna:{{ Text.id }}=={{ Text.name }}</div>
  <div>{{ id }}---{{ name }}</div>
  <button @click="change">更改</button>
</template>

<script setup lang="ts">
// 引入
import { useTextPinia } from '@/stores/index'
import { storeToRefs } from 'pinia'
// 创建实例
const Text = useTextPinia()
// 直接解构 useTextPinia 拿到 state中的值  不具有响应式
// storeToRefs() 可以将 结构出来的 state 属性变为 ref 对象
// const { id, name } = Text //不具有响应式
const { id, name } = storeToRefs(Text) //解构出来的值变为ref对象
console.log(id, name)

const change = () => {
  // Text.setId()
  id.value++
}
</script>

5.改变 state中的数据的方法

<script setup lang="ts">
import { useTextPinia } from '@/stores/index'
const Text = useTextPinia()
// 更改 state 中的数据
const change = () => {
  // 1.直接更改某个数据
  // Text.id = 2

  // 2.批量修改 $patch()  对象方式修改  接收一个对象
  // Text.$patch({ id: 3, name: '李四' })
  // 3.$patch() 函数方式修改  接收一个函数 参数为定义的 state
  /*   Text.$patch((state) => {
    state.id++
    state.name += '+'
  }) */

  // 4.直接修改 state 对象 $state  所有属性必须包含
  /* Text.$state = {
    id: 4,
    name: '李四'
  } */

  // 5.通过调用  actions 中定义的方法更改  实例可直接调用
  Text.setId()
}
</script>

6.pinia中的 api

$reset() 重置 state中的数据

$subscribe() 监听 state中值的变化

$onAction() 监听action中方法的调用

// pinia api
const reset = () => {
  // $reset()  重置state数据
  Text.$reset()
}
//  $subscribe()  监听 state中值的变化
Text.$subscribe(
  (info, state) => {
    console.log(info)
    console.log(state)
  },
  { deep: true }
)
// $onAction() 监听action中方法的调用
Text.$onAction((args) => {
  console.log(args)
})

7.pinia 数据持久化插件（解决刷新页面数据丢失问题）

插件代码

// 数据持久化插件
import { toRaw } from "vue"
import type { PiniaPluginContext } from "pinia"
type Options = {
  key?: string
}
// 将数据存储到   localStorage 中 实现 pinia数据持久化
const setLocalStorage = (key: string, val: any) => {
  localStorage.setItem(key, JSON.stringify(val))
}
// 获取 localStorage 中的数据
const getLocalStorage = (key: string) => {
  return localStorage.getItem(key)
}
// 默认 key名
const _pinia: string = 'pinia'
export default (options?: Options) => {
  return (context: PiniaPluginContext) => {
    const { store } = context
    console.log(context);

    // 获取存储的数据
    const data = JSON.parse(getLocalStorage(options?.key ?? _pinia + `-${store.$id}`) as string) ?? {}
    console.log(data);
    // state 数据发生改变时调用
    store.$subscribe(() => {
      setLocalStorage(options?.key ?? _pinia + `-${store.$id}`, toRaw(store.$state))
    })
    // 最终返回的对象会 替换掉 pinia 实例中的 state
    return {
      ...data
    }
  }
}

使用插件：

main.ts

import piniaPlugin from '@/stores/plugins'
const app = createApp(App);
const store = createPinia()
store.use(piniaPlugin())

7.第三方集成 pinia数据持久化插件 pinia-plugin-persist

 安装：
 npm i pinia-plugin-persist 

main.ts中配置：

import piniaPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPersist)
app.use(store);

使用：

实例中可以多配置一个属性 persist 为一个对象，配置属性：

enabled 是否开启数据持久化

strategies 自定义配置为一个数组，数组中存放配置对象

配置对象三个属性：

key：存储数据的属性名

storage: 存储的位置 默认 sessionStorage

paths: 指定要存储的数据 默认存储全部(数组形式)

  // 插件配置
  persist: {
    // 开启数据持久化
    enabled: true,
    strategies: [{
      //  持久化数据存储的 key 值  默认为pinia实例id
      key: 'pinia-num',
      // 存储的位置  默认 sessionStorage
      storage: localStorage,
      // 指定要存储的数据  默认存储全部
      paths: ['num']
    }]
  }
})