uniapp vue3 下 pinia 的本地数据缓存插件


uniapp 下 pinia 的本地数据缓存插件

pinia-plugin-unistorage - npm (npmjs.com)

 

使用

安装

1. cli 创建的 uniapp 项目

npm i pinia-plugin-unistorage -D
// main.js
import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import { createUnistorage } from "pinia-plugin-unistorage";

export function createApp() {
  const app = createSSRApp(App);

  const store = Pinia.createPinia();

  // 关键代码 👇
  store.use(createUnistorage());

  app.use(store);

  return {
    app,
    Pinia, // 此处必须将 Pinia 返回
  };
}

 

2. hbuilderx 创建的 uniapp 项目

👉 直接插件市场安装 后引入注册

// main.js
import { createSSRApp } from "vue";
import * as Pinia from "pinia";
import { createUnistorage } from "./uni_modules/pinia-plugin-unistorage";

export function createApp() {
  const app = createSSRApp(App);

  const store = Pinia.createPinia();

  // 关键代码 👇
  store.use(createUnistorage());

  app.use(store);

  return {
    app,
    Pinia, // 此处必须将 Pinia 返回
  };
}

基础

import { defineStore } from "pinia";

export const useStore = defineStore("main", {
  state() {
    return {
      someState: "hello pinia",
    };
  },
  unistorage: true, // 开启后对 state 的数据读写都将持久化
});

或者 setup 语法也是支持的

import { defineStore } from "pinia";

export const useStore = defineStore(
  "main",
  () => {
    const someState = ref("hello pinia");
    return { someState };
  },
  {
    unistorage: true, // 开启后对 state 的数据读写都将持久化
  },
);

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
张国生
上一篇:uniapp微信小程序使用axios(vue3+axios+ts版)
下一篇:AI命令
评论列表

发表评论

评论内容
昵称:
关联文章

uniapp vue3 pinia 本地数据缓存
Vue 3项目中使用TypeScript和Pinia进行持久化状态管理和初始化操作
【C#】C#中使用GDAL3(三):Windows编译驱动
解决uniapp button组type类型类型
页面快排开发
vue3重新封装element-plus组按钮组件el-button
vue3+vist 打包空白
C# MEF化开发
代码编辑使用
.NET Core ResponseCache 浏览器缓存
Vue 3 中,嵌套数据源且需要过滤内部数据
VUE3版本 页面切换后数据丢失问题
页面快排配置支持图片上传
YES-CMS 内容管理系统 TinyMCE编辑演示
解决VUE发布后因为浏览器缓存造成页面没更新问题
使用Vue3轻松集成Lottie-web动画:从入门到实践
vue3 element-plus实现长滚动,一个一个内容块 和tab联动
C# NPOI导出excel绑定列数据
Xamarin.Forms 复制本地SQLite数据库
使用.NET 6开发TodoList应用(22)——实现缓存

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码