首页 > 其他分享 >NOTE_pinia持久化插件的使用

NOTE_pinia持久化插件的使用

时间:2022-11-30 11:01:46浏览次数:36  
标签:插件 vue const counter NOTE pinia import vite

E:\song\vue_vue_learn\vite-project\index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue + TS</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

E:\song\vue_vue_learn\vite-project\src\App.vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
import PiniaPersist from "./components/PiniaPersist.vue";
</script>

<template>
  <HelloWorld msg="Vite + Vue" />
  <PiniaPersist />
</template>

<style scoped></style>

E:\song\vue_vue_learn\vite-project\src\main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { pinia } from "./store/index";

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

E:\song\vue_vue_learn\vite-project\src\components\HelloWorld.vue

<script setup lang="ts">
import { ref } from "vue";

defineProps<{ msg: string }>();

const count = ref(0);
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

<style scoped></style>

E:\song\vue_vue_learn\vite-project\src\components\PiniaPersist.vue

<template>
  <div>pinia中的store:{{ useCount.counter }}</div>
  <button @click="add">+1</button>
</template>
<script setup lang="ts">
import { useCountStore } from "../store/modules/counter";
const useCount = useCountStore();

const add = () => {
  useCount.add();
};
</script>

E:\song\vue_vue_learn\vite-project\src\store\index.ts

import { createPinia } from "pinia";

// 引入 持久化插件
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";

const pinia = createPinia();
// 使用  持久化插件
pinia.use(piniaPluginPersistedstate);

export { pinia };

E:\song\vue_vue_learn\vite-project\src\store\modules\counter.ts

import { ref } from "vue";
import { defineStore } from "pinia";
import { parse, stringify } from "zipson";

export const useCountStore = defineStore(
  "counter",
  () => {
    const counter = ref(0);

    const add = () => {
      counter.value++;
    };

    return { counter, add };
  },
  {
    persist: {
      key: "counter",
      serializer: {
        deserialize: parse,
        serialize: stringify,
      },
    },
  }
);

标签:插件,vue,const,counter,NOTE,pinia,import,vite
From: https://www.cnblogs.com/zhuoss/p/16937766.html

相关文章

  • vue 上传插件
    ​ 关键部分前端用file.slice()分块前端用FileReader获取每一分块的md5值后端用MultipartFile接受分块文件后端用FileOutputStream拼装分块文件话不多说,直接上代码,......
  • IDEA 插件
    IDEA插件1、RestfulToolkit对象转换为KV键值对对象转换为JSON(单行展示)对象转换为JSON快速跳转至CONTROLLER(MAC:command+/)其他功能待你去摸索//KVmerc......
  • 【Unity插件】NGUI核心组件之UIAtlas
    NGUI:UIAtlasUIAtlas是一个容器,他包含了许多sprite的坐标信息。如果你对这个概念不是很熟悉,你可以这样理解:与使用很多小的贴图来渲染UI相比,使用一张包含了所有小贴图的大......
  • 编译Keepass 插件IIME 记录
    Keepass自动输入时,输入法总是冒出来。安装插件实现输入前自动切换为英文,自动输入完成后恢复为中文下载插件源码gitclonehttps://github.com/iuuniang/IIME.git编译......
  • jupyter notebook 踩坑记录
    1.安装软件路径不能是中文2.用户名不能是中文,否则找不到解释器#https://blog.csdn.net/weixin_51684729/article/details/124056544"""1.Win+R打开运行窗口,输入regedi......
  • vscode 按 tab 自动补全 vue 插件
    1.在vscode中搜索 HTMLSnippets,并安装2  3  4.在配置项中复制粘贴下面的代码"files.associations":{"*.vue":"html"},"emmet.......
  • Bootstrap_组件_导航条&分页条和Bootstrap_插件_轮播图
    Bootstrap_组件_导航条&分页条:组件: 导航条:导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠(并且可开可关),且在视口(viewpor......
  • 用ShopEx网上开店之安装Zend插件[2]
    接下来要指定Apacheweb文档根目录,默认的是Apache2\htdocs文件夹,根据前面的章节中的设置,我们将其定位到E:\wwwroot目录。  在下一步中,安装程序把你指定的目录参数列了出......
  • Higress 实战:30 行代码写一个 Wasm Go插件
    作者:澄潭、如葑前言在11月15号的直播《Higress开源背后的发展历程和上手Demo演示》中,为大家演示了Higress的Wasm插件如何面向Ingress资源进行配置生效,本......
  • maven几种打包插件介绍,及个人心得总结
    文章目录​​一、maven几种打包插件介绍​​​​二、插件用法详细介绍​​​​1.spring-boot-maven-plugin​​​​介绍​​​​使用​​​​2.maven-shade-plugin​​​​......