pinia持久化存储vue3 ts

对于持久化存储 Vue 3 + TypeScript 中，你可以使用 Pinia。Pinia 是一个为 Vue 3 设计的状态管理库，它支持 TypeScript，并且提供了内置的插件来支持持久化存储。

首先，你需要安装 Pinia：

npm install pinia

然后，你可以创建一个 Pinia store 并在其中定义你的状态和操作。在 store 中，你可以使用内置的 `persist` 插件来实现持久化存储。这个插件将自动将你的状态保存到本地存储中，并在应用重新加载时恢复它。

import { defineStore } from 'pinia'

export const useMyStore = defineStore('myStore', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
  },
  plugins: [persist()],
})

在上面的示例中，我们定义了一个名为 `myStore` 的 Pinia store，并添加了一个状态 `count` 和一个操作 `increment`。我们还在 `plugins` 选项中添加了 `persist()` 插件。

现在，你可以在你的 Vue 组件中使用 `useMyStore` 来访问和操作这个 store：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue'
import { useMyStore } from './myStore'

export default defineComponent({
  setup() {
    const myStore = useMyStore()

    return {
      count: myStore.count,
      increment: myStore.increment,
    }
  },
})
</script>

现在，每当你点击 "Increment" 按钮时，`count` 的值将递增，并且这个值将在应用重新加载时保留下来。

这就是如何使用 Pinia 实现持久化存储在 Vue 3 + TypeScript 中。希望能对你有所帮助！如果有任何疑问，请随时提问。