Pinia 本地持久化

最新推荐文章于 2024-06-03 14:18:09 发布

returnture

最新推荐文章于 2024-06-03 14:18:09 发布

阅读量447

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_62452941/article/details/127228389

版权

这篇博客介绍了如何在JavaScript项目中利用Pinia库进行本地状态持久化。首先，详细说明了安装Pinia的步骤，包括运行安装命令。接着，讲解了创建pinia.js配置文件，并在main.js中引入该配置。最后，提到了在具体需要持久化的Pinia文件中应用这些设置，以确保数据在页面刷新后仍能保持。

摘要由CSDN通过智能技术生成

```
npm install pinia
```
安装：pinia

pnpm : pnpm i pinia-plugin-persistedstate
npm : npm i pinia-plugin-persistedstate
yarn : yarn add pinia-plugin-persistedstate

安装：pinia-plugin-persistedstate

创建 pinia.js

//解构pinia中的createPinia用于创建pinia实例
import { createPinia } from "pinia";
//实例化pinia
const store = createPinia();
//引入持久化插件
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
//pinia使用
store.use(piniaPluginPersistedstate);

export default store;

在 main.js 中引入 pinin.js

import { createApp } from "vue";
import store from "../src/stores/pinia"; // pinia.js

import App from "./App.vue";

const app = createApp(App);
app.use(store);
app.mount("#app&