pinia使用

Pinia提供了一个简单、灵活和高效的方式来管理Vue 3应用程序中的状态。

安装

npm install pinia

创建pinia实例并在main.js中挂在

import { createPinia } from 'pinia'
const pinia = createPinia()

// main.js
app.use(pinia)

counter 示例

// store/counter.js
import { ref, computed } from "vue";
import { defineStore } from "pinia";
// 选项式写法
export const useCounterStore = defineStore(
  "counter",
  {
    state: () => ({ count: 0 }),
    // state: () => {
    //   return { count: 0 }
    // },
    actions: {
      increment() {
        this.count++;
      },
    },
  }
);
// 组合式写法 
export const useCounterStore = defineStore(
  "counter",
  () => {
    const count = ref(0);
    const increment =()=> {
      count.value++;
    }
    return {
      count,
      increment
    };
  },
  {
  //...更多配置
  }
);

由于Pinia支持Composition API 所以平时会用组合式写法。 在上面代码中defineStore有三个参数：

• 第一个参数：storeName 类型：String 描述：store的名称。标识该store的唯一性
• 第二个参数：setup 类型: () => StoreDefinition<State, Getters, Actions, StoreOptions> 描述：类似Vue组件中setup()函数
• 第三个参数：storestoreOptions（可选） 类型：StoreOptions 描述：一个对象，包含一些 store 的选项

简单来说 第一个参数像是一个id 给某个store绑定上，给这个仓库唯一化。 第二个参数规定了仓库里面的初始值以及变化值。第三个参数 是个配置选项，例如 persist（是否启用持久化存储）、devtools（是否启用开发工具）等。 最后使用export 抛出useCounterStore 方法

使用

<template>
  <!-- 直接从 store 中访问 state -->
  <div>Current Count: {{ counter.count }}</div>
  <button @click="clickHanlde">加1</button>
</template>

<script setup>
  import { useCounterStore } from '@/store/counter'

  const counter = useCounterStore()
  const clickHanlde=()=>{
    counter.increment()
  }

</script>

<style scoped>
</style>

数据持久化

示例刷新会发现count会变成0，因为数据没有持久化处理，而pinia本身没有提供数据持久化，因此需要安装插件pinia-plugin-persistedstate。

1. 安装

npm install pinia-plugin-persistedstate

2. 在store/index.js中挂载

import { createPinia } from "pinia" //引入pinia
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' //引入持久化插件

const pinia = createPinia() //创建pinia实例
pinia.use(piniaPluginPersistedstate) //将插件添加到 pinia 实例上

export default pinia //导出pinia用于main.js注册

3. 在store/counter.js中使用 1. 基本使用

> 创建 Store 时，将 persist 选项设置为 true，整个 Store 将使用默认持久化配置保存。
**默认持久化配置：**
  - 使用 localStorage进行存储
  - store.$id作为 storage 默认的 key
  - 使用 JSON.stringify / JSON.parse进行序列化/反序列化
  - 整个 state 默认将被持久化

import { defineStore } from "pinia"
const useUserInfoStore = defineStore('userInfo', {
  // defineStore('userInfo',{})  userInfo就是这个仓库的名称name
  state: () => ({
    username:'赫赫',
    age: 23,
    like: 'girl',
  }),
  getters: {
        ...........
  },
  action：{
    .........
  },
  persist: true,
})
export default useUserInfoStore

2. 高级使用
> 如何你不想使用默认的配置，那么可以将一个对象传递给 Store 的 persist 属性来配置持久化
**三个常用属性：**
- key：存储名称。
- storage：存储方式。
- path：用于指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state。

import { defineStore } from "pinia"
const useUserInfoStore = defineStore('userInfo', {
  // defineStore('userInfo',{})  userInfo就是这个仓库的名称name
  state: () => ({
    username:'赫赫',
    age: 23,
    like: 'girl',
    obj:{ money:100,friend:10 }
  }),
  getters: {
        ...........
  },
  action：{
    .........
  },
  persist: {
      key: 'piniaStore', //存储名称
      storage: sessionStorage, // 存储方式
      paths: ['username', 'like','obj'], //指定 state 中哪些数据需要被持久化。[] 表示不持久化任何状态，undefined 或 null 表示持久化整个 state
  },
})
export default useUserInfoStore