vue中使用pinia、pinia-plugin-persist（本地存储）状态存储管理

前端(HC)

已于 2022-05-28 17:15:39 修改

阅读量1.2k

点赞数

分类专栏： pinia 文章标签：前端 vue.js javascript

于 2022-05-28 16:02:51 首次发布

本文链接：https://blog.csdn.net/weixin_42150106/article/details/125019296

版权

本文介绍了Pinia作为Vue的状态管理工具，以及如何结合pinia-plugin-persist实现本地存储。通过四个步骤展示了从引入库到在组件中使用的全过程，包括在main.js中配置全局、创建piniaStore.js文件以及处理可能出现的导入错误。最后，鼓励读者查阅官方文档以获取更详细信息。

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

5.出现报错类似Can't import the named export 'watch' from non EcmaScript module (only default export is available)

总结

一、pinia是什么？

Pinia 是 Vue 的状态管理存储库，可以跨页面存储，使用pinia-plugin-persist可以在本地存储。

二、使用步骤

1.引入库

npm install pinia 
npm install pinia-plugin-persist //存储插件
npm install @vue/composition-api

2.新建piniaStore.js文件

代码如下（示例）：

import { defineStore } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
export const useCounterStore = defineStore('counter', {
  state: () => {
    return { 
        piniaCount: 1 
    }
  },
  persist: {
    enabled: true, // 开启缓存默认会存储在本地locals