feat: update pinia

Author: unliar

package-lock.json

@@ -26,7 +26,8 @@
         "js-cookie": "^2.2.1",
         "markdown-it": "^12.0.4",
         "nprogress": "^0.2.0",
-        "vue": "^3.1.4",
+        "pinia": "^2.0.0-rc.9",
+        "vue": "^3.2.0",
         "vue-global-api": "^0.2.1",
         "vue-router": "^4.0.3",
         "vue-toastification": "^2.0.0-rc.1",

package.json

@@ -5,11 +5,10 @@
 <script lang="ts" setup>
 import { useHead } from "@vueuse/head";
 import { POSITION, useToast } from "vue-toastification";
-import { useStore } from "vuex";
+import { useStore } from "~/store/pinia";
 import { useRoute } from "vue-router";
 
 import GithubStar from "~/components/common/GithubStar.vue";
-import { ACTIONS } from "~/store/type";
 import { useBaiduInit } from "./utils/pageView";
 const store = useStore();
 const toast = useToast();
@@ -36,9 +35,10 @@ onMounted(async () => {
 
     // 应用初始化 Store 数据
     // 用户登录信息
-    store.dispatch(ACTIONS.GET_AUTHED_USER_INFO);
+    store.GetAuthedUserInfo();
+
     // 用户主题信息
-    store.dispatch(ACTIONS.GET_CATEGORY_LIST);
+    store.GetCategoryList();
     // 高亮初始化
     (window as any)?.hljs?.initHighlightingOnLoad?.();
 });

src/App.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
 import { useToast } from "vue-toastification";
-import { useStore } from "vuex";
-import type { StoreType } from "~/store/index";
+import { useStore } from "~/store/pinia";
+
 import { GetCommentList, PostComment } from "~/api/article";
 import { DefaultFormat } from "~/utils/time";
 
@@ -13,9 +13,9 @@ const props = defineProps({
 
 const toast = useToast();
 const router = useRouter();
-const store = useStore<StoreType>();
+const store = useStore();
 
-const isAuthed = computed(() => store?.state?.User?.Id ?? 0 > 0);
+const isAuthed = computed(() => store?.User?.Id ?? 0 > 0);
 
 // 评论值
 // ref: Comment = ""

src/components/article/Comment.vue

@@ -21,8 +21,7 @@
 </template>
 <script lang="ts" setup>
 import { useRouter } from "vue-router";
-import { useStore } from "vuex";
-import type { StoreType } from "~/store";
+import { useStore } from "~/store/pinia";
 
 const router = useRouter();
 
@@ -40,15 +39,15 @@ const ToIndex = () => {
     router.push("/");
     // window.location.href = "/"
 };
-const store = useStore<StoreType>();
+const store = useStore();
 // 判断用户是否作者
 const isAuthor = computed(
-    () => !!store.state.User?.Roles?.find(i => i.Title == "Author")
+    () => !!store.User?.Roles?.find(i => i.Title == "Author")
 );
 // 获取用户ID
-const userId = computed(() => store.state.User.Id ?? 0);
+const userId = computed(() => store.User.Id ?? 0);
 // 获取用户头像
-const avatar = computed(() => store.state.User.Avatar ?? "");
+const avatar = computed(() => store.User.Avatar ?? "");
 // props
 const title = props.title;
 const brief = props.brief;

src/components/common/Header.vue

@@ -1,14 +1,12 @@
-import { useStore } from "vuex";
-
-import { StoreType } from "~/store";
+import { useStore } from "~/store/pinia";
 
 import "./index.css";
 const DefaultLayout = defineComponent({
     name: "content-layout",
     setup() {
-        const store = useStore<StoreType>();
+        const store = useStore();
         return {
-            CategoryList: computed(() => store.state.Article.CategoryList),
+            CategoryList: computed(() => store.Article.CategoryList),
         };
     },
     render() {

src/components/layouts/Content/index.tsx

@@ -23,13 +23,11 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from "vuex";
+import { useStore } from "~/store/pinia";
 
-import type { StoreType } from "~/store";
+const store = useStore();
 
-const store = useStore<StoreType>();
-
-const CategoryList = computed(() => store.state.Article.CategoryList);
+const CategoryList = computed(() => store.Article.CategoryList);
 </script>
 
 <style scoped>

src/components/layouts/Content/index.vue

@@ -1,5 +1,6 @@
 import { createApp } from "vue";
 import { createHead } from "@vueuse/head";
+import { createPinia } from "pinia";
 import "vue-global-api";
 import Toast, { PluginOptions, POSITION } from "vue-toastification";
 import "vue-toastification/dist/index.css";
@@ -22,7 +23,17 @@ const options: PluginOptions = {
     transition: "Vue-Toastification__fade",
 };
 const head = createHead();
+const pinia = createPinia();
+pinia.use(({ store }) => {
+    store.$subscribe(t => {
+        console.log("store state changed", t);
+    });
+    store.$onAction(a => {
+        console.log("store action fired", a);
+    });
+});
 createApp(App)
+    .use(pinia)
     .use(Toast, options)
     .use(head)
     .use(RouterInstance)

src/main.ts

@@ -11,6 +11,9 @@ export type StoreType = {
     };
 };
 
+/**
+ * @deprecated 废弃
+ */
 const Store = createStore<StoreType>({
     state() {
         return {