怪物奇妙物语

宇宙无敌超级美少男的怪物奇妙物语

首页 新随笔 联系 管理
  819 随笔 :: 0 文章 :: 2 评论 :: 16万 阅读

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,
},
},
}
);
posted on   超级无敌美少男战士  阅读(67)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示