Vue3 中如何配置 Pina 持久化存储

1. 安装 Pina

在 Vue3 项目中，可以通过 npm 安装 Pina：

npm install pina

1. 2创建插件

为了提高可维护性，可以为 Pina 创建一个插件。

创建 pina.js 文件，然后在文件中输入如下代码：

import { createStore } from "pina";
export const store = createStore();
export default {
  install: (app) => {
    app.config.globalProperties.$store = store;
    app.provide("store", store);
  },
};

1. 3在 main.js 中引入插件

在 main.js 文件中引入插件，并将其添加到 Vue 应用程序中：

import { createApp } from "vue";
import App from "./App.vue";
import pina from "./pina.js";

createApp(App).use(pina).mount("#app");

1. 4使用 Pina

通过上述配置后，您就可以在 Vue3 中使用 Pina 的持久化存储功能了。例如：

import { store } from "./pina.js";
export default {
  setup() {
    const count = store.ref("count", 0);
    const increment = () => {
      count.value++;
    };
    return { count, increment };
  },
};

在上述代码中，我们创建了一个 count 变量，并通过 store.ref 函数实现了持久化存储。在组件中使用 count.value 来获取该变量的值。

以上是在 Vue3 中配置 Pina 持久化存储的基本步骤。请注意，这只是一个简单的示例，您可以根据您的实际需要进行更改和扩展。