Pinia+Vue3使用案例及Pinia持久化存储

为什么要使用Pinia

Pinia是Vue的一个存储库，它允许你跨组件/页面共享状态。 如果你熟悉Composition API，你可能会认为你已经可以通过一个简单的导出const state = reactive({})来共享一个全局状态。 这对于单页应用程序是正确的，但如果是服务器端呈现，则会暴露应用程序的安全漏洞。 但即使是在小的单页应用程序中，你也可以通过使用Pinia获得很多:

• 热模块替换
• 修改存储而无需重新加载页面
• 在开发过程中保持任何现有状态
• 使用插件扩展Pinia功能
• 为JS用户提供正确的TypeScript支持或自动补全
• 服务器端渲染支持

安装

 npm install pinia

配置

新建sotre仓库

index.ts

import type { App } from "vue";
import { createPinia } from "pinia";

const store = createPinia();

export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };

以premession.ts模块为例

import { defineStore } from "pinia";
import { store } f