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,
},
},
}
);
