perf: 使用 pinia 管理已选标签

mark9804 · Nov 23, 2024 · 6b4998a · 6b4998a
1 parent f1bdf5d
commit 6b4998a
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 40 deletions.
diff --git a/docs/.vitepress/piniaStore.ts b/docs/.vitepress/piniaStore.ts
@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import { ref, computed } from "vue";
+import { unique, sift } from "radash";
 
 export const useCustomStore = defineStore(
   "vitepress-custom-store",
@@ -10,10 +11,34 @@ export const useCustomStore = defineStore(
       showComments.value = !showComments.value;
     }
 
+    const selectedTags = ref<string[]>([]);
+    const getSelectedTags = computed(() => selectedTags.value);
+    function setSelectedTags(tags: string[]) {
+      selectedTags.value = unique(sift(tags));
+    }
+    function pushSelectedTags(tags: string[] | string) {
+      setSelectedTags([
+        ...selectedTags.value,
+        ...(Array.isArray(tags) ? tags : [tags]),
+      ]);
+    }
+    function removeSelectedTags(tag: string) {
+      setSelectedTags(getSelectedTags.value.filter(t => t !== tag));
+    }
+    function resetTags() {
+      setSelectedTags([]);
+    }
+
     return {
       showComments,
       getCommentsVisibility,
       toggleCommentsVisibility,
+      selectedTags,
+      getSelectedTags,
+      setSelectedTags,
+      pushSelectedTags,
+      removeSelectedTags,
+      resetTags,
     };
   },
   {

diff --git a/docs/.vitepress/theme/components/ElysiumUI/ElyCard.vue b/docs/.vitepress/theme/components/ElysiumUI/ElyCard.vue
@@ -4,6 +4,9 @@ import type { CardProps } from "./types/CardProps";
 import { withBase } from "vitepress";
 import { formatRelativeTime } from "../../utils/timeUtils";
 import { useSearchTags } from "../../utils/tagSearchUtils";
+import { useCustomStore } from "../../../piniaStore";
+
+const store = useCustomStore();
 
 const props = withDefaults(defineProps<CardProps>(), {
   content: () => ({
@@ -30,8 +33,9 @@ const props = withDefaults(defineProps<CardProps>(), {
 const isLink = computed(() => props.as === "link");
 
 function handleTagClick(tag: string) {
-  const currentTags = useSearchTags.get();
-  useSearchTags.go([...currentTags, tag]);
+  store.resetTags();
+  store.pushSelectedTags(tag);
+  useSearchTags.go();
 }
 
 const relativeTime = ref(formatRelativeTime(props.content.createdAt));

diff --git a/docs/.vitepress/theme/components/TagSearchPage.vue b/docs/.vitepress/theme/components/TagSearchPage.vue
@@ -1,23 +1,22 @@
 <script setup lang="ts">
-import { useSearchTags } from "../utils/tagSearchUtils";
 import { postData } from "../utils/usePostData";
 import { computed, ref } from "vue";
 import ArticleWaterfallList from "./ArticleWaterfallList.vue";
 import ElyTag from "./ElysiumUI/ElyTag.vue";
+import { useCustomStore } from "../../piniaStore";
+
+const store = useCustomStore();
 
 const allTags = ref([]);
 const allPosts = ref([]);
 
-const selectedTags = ref([]);
+const selectedTags = computed(() => store.getSelectedTags);
 
 const toggleTag = (tag: string) => {
-  selectedTags.value = selectedTags.value.includes(tag)
-    ? selectedTags.value.filter(t => t !== tag)
-    : [...selectedTags.value, tag];
-  if (!selectedTags.value.includes(tag)) {
-    useSearchTags.remove(tag);
+  if (selectedTags.value.includes(tag)) {
+    store.removeSelectedTags(tag);
   } else {
-    useSearchTags.push([tag]);
+    store.pushSelectedTags(tag);
   }
 };
 
@@ -26,7 +25,7 @@ const isTagActive = (tag: string) => selectedTags.value.includes(tag);
 const filteredPosts = computed(() => {
   if (selectedTags.value.length === 0) return allPosts.value;
   return allPosts.value.filter(post =>
-    selectedTags.value.every(tag => post.frontmatter?.tags?.includes(tag))
+    selectedTags.value.some(tag => post.frontmatter?.tags?.includes(tag))
   );
 });
 
@@ -39,8 +38,6 @@ postData
 postData.getAllTags().then(res => {
   allTags.value = res;
 });
-
-selectedTags.value = useSearchTags.get();
 </script>
 
 <template>

diff --git a/docs/.vitepress/theme/utils/tagSearchUtils.ts b/docs/.vitepress/theme/utils/tagSearchUtils.ts
@@ -1,32 +1,7 @@
 import { withBase } from "vitepress";
-import { unique } from "radash";
 
 export const useSearchTags = {
-  get: () =>
-    new URL(window.location.href).searchParams
-      .get("keywords")
-      ?.split(",")
-      .filter(Boolean) || [],
-
-  set: (tags: string[]) => {
-    const url = new URL(window.location.href);
-    url.searchParams.set("keywords", unique(tags).join(","));
-    window.location.href = url.toString();
-  },
-
-  push: (tags: string[]) => {
-    const currentTags = useSearchTags.get();
-    useSearchTags.set([...currentTags, ...tags]);
-  },
-
-  remove: (tag: string) => {
-    const currentTags = useSearchTags.get();
-    useSearchTags.set(currentTags.filter(t => t !== tag));
-  },
-
-  go: (tags: string[]) => {
-    window.location.href = withBase(
-      `/tags/?keywords=${encodeURIComponent(unique(tags).join(","))}`
-    );
+  go: () => {
+    window.location.href = withBase("/tags/");
   },
 };