refactor(app): 移除 KeepAlive 功能
- 删除了 KeepAlive 相关的代码和组件 - 移除了 Pinia相关的代码和组件 - 更新了 README 文档,删除了 Pinia 相关的说明- 移除了国际化文件中与 KeepAlive 相关的翻译项
This commit is contained in:
parent
f54058b0ec
commit
3c8cd2c782
@ -39,9 +39,6 @@
|
|||||||
- 🔥 `<script setup>` 语法
|
- 🔥 `<script setup>` 语法
|
||||||
|
|
||||||
- 🌍 [国际化支持](./i18n/locales)
|
- 🌍 [国际化支持](./i18n/locales)
|
||||||
|
|
||||||
- 🍍 [使用 Pinia 进行状态管理](https://github.com/vuejs/pinia),查看 [./app/composables/counter.ts](./app/composables/counter.ts)
|
|
||||||
|
|
||||||
- 📑 [布局系统](./app/layouts)
|
- 📑 [布局系统](./app/layouts)
|
||||||
|
|
||||||
- 📥 API 自动导入 - 用于 Composition API 和自定义组合式函数
|
- 📥 API 自动导入 - 用于 Composition API 和自定义组合式函数
|
||||||
@ -57,8 +54,6 @@
|
|||||||
- [i18n](https://github.com/nuxt-modules/i18n) - Nuxt 的国际化模块
|
- [i18n](https://github.com/nuxt-modules/i18n) - Nuxt 的国际化模块
|
||||||
- [ColorMode](https://github.com/nuxt-modules/color-mode) - 支持自动检测的深色和浅色模式
|
- [ColorMode](https://github.com/nuxt-modules/color-mode) - 支持自动检测的深色和浅色模式
|
||||||
- [UnoCSS](https://github.com/unocss/unocss) - 即时按需原子化 CSS 引擎
|
- [UnoCSS](https://github.com/unocss/unocss) - 即时按需原子化 CSS 引擎
|
||||||
- [Pinia](https://github.com/vuejs/pinia) - 直观、类型安全、轻量且灵活的 Vue 状态管理
|
|
||||||
- [Pinia Persistedstate](https://github.com/prazdevs/pinia-plugin-persistedstate) - 可配置的 Pinia 存储持久化和重新激活
|
|
||||||
- [DevTools](https://github.com/nuxt/devtools) - 释放 Nuxt 开发者体验
|
- [DevTools](https://github.com/nuxt/devtools) - 释放 Nuxt 开发者体验
|
||||||
|
|
||||||
## IDE
|
## IDE
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import useKeepalive from '~/composables/keepalive'
|
|
||||||
import { appName, appDescription } from '~/constants'
|
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
/*import {message} from '@/components/x-message/useMessage.js'
|
/*import {message} from '@/components/x-message/useMessage.js'
|
||||||
message.success('success')*/
|
message.success('success')*/
|
||||||
@ -11,16 +9,11 @@ useHead({
|
|||||||
{ name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
|
{ name: 'keywords', content: useI18n().t('appSetting.appKeyWords') },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
const color = useColorMode()
|
const color = useColorMode()
|
||||||
|
|
||||||
const mode = computed(() => {
|
const mode = computed(() => {
|
||||||
return color.value
|
return color.value
|
||||||
})
|
})
|
||||||
|
|
||||||
const keepAliveRouteNames = computed(() => {
|
|
||||||
return useKeepalive().routeCaches
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -28,7 +21,7 @@ const keepAliveRouteNames = computed(() => {
|
|||||||
<NuxtLoadingIndicator
|
<NuxtLoadingIndicator
|
||||||
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
|
color="repeating-linear-gradient(to right,var(--c-primary) 0%,var(--c-primary-active) 100%)" />
|
||||||
<NuxtLayout>
|
<NuxtLayout>
|
||||||
<NuxtPage :keepalive="{ include: keepAliveRouteNames }" />
|
<NuxtPage/>
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
</VanConfigProvider>
|
</VanConfigProvider>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,24 +0,0 @@
|
|||||||
import type { RouteLocationNormalized, RouteRecordName } from 'vue-router'
|
|
||||||
import { defineStore } from 'pinia'
|
|
||||||
|
|
||||||
const useKeepalive = defineStore('keepalive', () => {
|
|
||||||
const routeCaches = ref<RouteRecordName[]>([])
|
|
||||||
|
|
||||||
const addRoute = (route: RouteLocationNormalized) => {
|
|
||||||
if (!route.name)
|
|
||||||
return
|
|
||||||
|
|
||||||
if (routeCaches.value.includes(route.name))
|
|
||||||
return
|
|
||||||
|
|
||||||
if (route?.meta?.keepalive)
|
|
||||||
routeCaches.value.push(route.name)
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
routeCaches,
|
|
||||||
addRoute,
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default useKeepalive
|
|
@ -1,7 +0,0 @@
|
|||||||
import type { RouteLocationNormalized } from 'vue-router'
|
|
||||||
import useKeepalive from '~/composables/keepalive'
|
|
||||||
|
|
||||||
export default defineNuxtRouteMiddleware((to: RouteLocationNormalized) => {
|
|
||||||
if (to.meta && to.meta.keepalive)
|
|
||||||
useKeepalive().addRoute(to)
|
|
||||||
})
|
|
@ -1,35 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import useCounter from '~/composables/counter'
|
|
||||||
|
|
||||||
definePageMeta({
|
|
||||||
title: '🍍 持久化 Pinia 状态',
|
|
||||||
i18n: 'menu.persistPiniaState',
|
|
||||||
})
|
|
||||||
|
|
||||||
const counter = useCounter()
|
|
||||||
|
|
||||||
function add() {
|
|
||||||
counter.increment()
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h1 class="text-6xl color-pink font-semibold">
|
|
||||||
Hello, Pinia!
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<p class="mt-10 text-gray-700 dark:text-white">
|
|
||||||
{{ $t('counter_page.label') }}
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<p class="mt-10">
|
|
||||||
{{ $t('counter_page.label_num') }}:
|
|
||||||
<strong class="text-green-500"> {{ counter.count }} </strong>
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<button class="mt-10 btn" @click="add">
|
|
||||||
{{ $t('counter_page.btn_add') }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
@ -12,7 +12,6 @@
|
|||||||
"404Demo": "🙅 Page 404 Demo",
|
"404Demo": "🙅 Page 404 Demo",
|
||||||
"unocssExample": "🎨 Unocss example",
|
"unocssExample": "🎨 Unocss example",
|
||||||
"keepAlive": "🧡 KeepAlive Demo",
|
"keepAlive": "🧡 KeepAlive Demo",
|
||||||
"persistPiniaState": "💾 Persist Pinia State",
|
|
||||||
"fetch": "🏄 Network Request"
|
"fetch": "🏄 Network Request"
|
||||||
},
|
},
|
||||||
"tabbar": {
|
"tabbar": {
|
||||||
|
Loading…
Reference in New Issue
Block a user