Pinia的使用

Pinia 是一个轻量级的 Vue.js 状态管理库，它提供了类似于 Vuex 的功能，但拥有更简洁的 API 和更好的类型支持。下面是 Pinia 的基本使用方法：

安装 Pinia

首先，确保你使用的是 Vue 3。然后，你可以通过 npm 或 yarn 来安装 Pinia：

npm install pinia
# 或者
yarn add pinia

创建 Pinia Store

在你的项目中创建一个 store 文件，例如 store.js或者store.ts，然后定义一个 store：

// store.js && store.ts
import { defineStore } from 'pinia'

export const useMainStore = defineStore('main', {
  state: () => {
    return {
      // 定义状态
      counter: 0
    }
  },
  actions: {
    // 定义动作
    increment() {
      this.counter++
    }
  }
})

在 Vue 应用中使用 Pinia

在你的 Vue 应用实例中注册 Pinia：

// main.js && main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)

app.mount('#app')

在组件中使用 Store

你可以在组件中使用 useStore 方法来访问定义的 store：

<template>
  <div>
    <p>{{ mainStore.counter }}</p>
    <button @click="mainStore.increment">Increment</button>
  </div>
</template>

<script>
import { useMainStore } from './store'

export default {
  name: 'MyComponent',
  setup() {
    const mainStore = useMainStore()

    // 如果需要解构 store 中的状态或方法，可以使用 storeToRefs
    // import { storeToRefs } from 'pinia'
    // const { counter } = storeToRefs(mainStore)

    return { mainStore }
  }
}
</script>

类型支持

Pinia 对 TypeScript 提供了很好的支持，你可以为 state、getters 和 actions 定义类型：

import { defineStore } from 'pinia'

interface MainState {
  counter: number
}

export const useMainStore = defineStore('main', {
  state: (): MainState => {
    return {
      counter: 0
    }
  },
  // 其他选项...
})

总结

Pinia 的使用相当简单，它提供了以下特点：

• 简洁的 API 设计
• 完整的 TypeScript 支持
• 易于理解和使用的插件系统
• 没有嵌套的模块结构，只有一个扁平化的状态结构

使用 Pinia 可以帮助你更好地管理 Vue 应用中的状态，尤其是在大型应用中。

另外，其中包含持久化插件，意味着你希望将 store 中的状态保存到本地存储（如 localStorage 或 sessionStorage）

1. 安装所需的插件

虽然 Pinia 本身不提供内置的持久化功能，但你可以使用 pinia-plugin-persist 这个插件来实现。首先，你需要安装它：

npm install pinia-plugin-persist
# 或者
yarn add pinia-plugin-persist

2. 使用插件

在你的项目中，通常是在创建 Pinia 实例的地方，引入并使用这个插件：

// main.js 或 main.ts
import { createPinia, PiniaPluginContext } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist';

const pinia = createPinia();
pinia.use(piniaPluginPersist);

export default pinia;

3. 配置 Store 以持久化状态

在你的 store 定义中，你可以通过 persist 选项来配置哪些状态需要被持久化，以及如何持久化：

// store.js
import { defineStore } from 'pinia';

export const useMainStore = defineStore('main', {
  state: () => ({
    // ...你的状态
  }),
  actions: {
    // ...你的 actions
  },
  persist: {
    enabled: true, // 启用持久化
    strategies: [
      {
        key: 'my_key', // 在本地存储中使用的键
        storage: localStorage, // 默认是 localStorage，也可以是 sessionStorage
        paths: ['propertyName1', 'propertyName2'], // 你想要持久化的状态属性，如果省略，则整个状态都会被持久化
      },
    ],
  },
});

在上面的例子中，enabled 设置为 true 表示启用持久化。strategies 是一个数组，可以定义多个持久化策略。每个策略可以包含以下选项：

• key: 在本地存储中使用的键名。
• storage: 指定使用的存储介质，默认是 localStorage。
• paths: 一个数组，指定要持久化的状态属性。如果省略，则整个状态都会被持久化。

注意事项

• 当你使用持久化时，应该考虑状态的安全性和隐私性，避免将敏感信息存储在本地存储中。
• 在某些情况下，你可能需要在应用启动时从本地存储中读取状态，或者在状态更新时将其保存回去。pinia-plugin-persist 插件会自动处理这些操作。
• 如果你的状态更新很频繁，你可能需要考虑性能影响，因为每次状态更新都可能触发存储操作。

通过以上步骤，你可以在 Pinia 中实现状态的持久化，使得用户在会话之间能够保持状态。