refactor: use pinia instead of vuex

star-history · Jan 12, 2022 · c816fd4 · c816fd4
1 parent f8d00b6
commit c816fd4
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 92 deletions.
diff --git a/package.json b/package.json
@@ -11,13 +11,13 @@
   "dependencies": {
     "d3": "^7.2.1",
     "dayjs": "^1.10.7",
+    "pinia": "^2.0.9",
     "tailwindcss": "^3.0.7",
     "typescript": "^4.4.4",
     "vite": "^2.7.2",
     "vue": "^3.2.25",
     "vue-router": "4",
-    "vue-tsc": "^0.29.8",
-    "vuex": "^4.0.2"
+    "vue-tsc": "^0.29.8"
   },
   "devDependencies": {
     "@types/chrome": "^0.0.171",

diff --git a/src/components/GenerateEmbedCodeDialog.vue b/src/components/GenerateEmbedCodeDialog.vue
@@ -74,9 +74,9 @@
 
 <script lang="ts">
 import { defineComponent, onMounted, reactive, watch } from "vue";
-import { useStore } from "vuex";
 import toast from "../helpers/toast";
 import utils from "../helpers/utils";
+import useAppStore from "../store";
 import Dialog from "./Dialog.vue";
 
 interface State {
@@ -89,16 +89,16 @@ export default defineComponent({
   components: { Dialog },
   emits: ["close"],
   setup(_, { emit }) {
-    const store = useStore<AppState>();
+    const store = useAppStore();
     const state = reactive<State>({
       embedCode: "",
-      token: store.state.token,
+      token: store.token,
     });
 
     onMounted(() => {
       state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
         window.location.origin
-      }/embed?secret=${btoa(state.token)}#${store.state.repos.join(
+      }/embed?secret=${btoa(state.token)}#${store.repos.join(
         "&"
       )}&Date" frameBorder="0"></iframe>`;
     });
@@ -108,7 +108,7 @@ export default defineComponent({
       () => {
         state.embedCode = `<iframe style="width:100%;height:auto;min-width:600px;min-height:400px;" src="${
           window.location.origin
-        }/embed?secret=${btoa(state.token)}#${store.state.repos.join(
+        }/embed?secret=${btoa(state.token)}#${store.repos.join(
           "&"
         )}&Date" frameBorder="0"></iframe>`;
       }

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -91,7 +91,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, reactive } from "vue";
-import { useStore } from "vuex";
+import useAppStore from "../store";
 import TokenSettingDialog from "./TokenSettingDialog.vue";
 
 interface State {
@@ -103,13 +103,13 @@ export default defineComponent({
   name: "Header",
   components: { TokenSettingDialog },
   setup() {
-    const store = useStore<AppState>();
+    const store = useAppStore();
     const state = reactive<State>({
       showDropMenu: false,
       showSetTokenDialog: false,
     });
     const token = computed(() => {
-      return store.state.token;
+      return store.token;
     });
 
     const handleSetTokenBtnClick = () => {

diff --git a/src/components/RepoInputer.vue b/src/components/RepoInputer.vue
@@ -70,9 +70,9 @@ import {
   ref,
   watch,
 } from "vue";
-import { useStore } from "vuex";
 import { GITHUB_REPO_URL_REG } from "../helpers/consts";
 import toast from "../helpers/toast";
+import useAppStore from "../store";
 
 interface State {
   repo: string;
@@ -85,18 +85,18 @@ interface State {
 export default defineComponent({
   name: "RepoInputer",
   setup() {
-    const store = useStore<AppState>();
+    const store = useAppStore();
     const state = reactive<State>({
       repo: "",
       repos: [],
     });
     const inputElRef = ref<HTMLInputElement | null>(null);
     const isFetching = computed(() => {
-      return store.state.isFetching;
+      return store.isFetching;
     });
 
     onMounted(() => {
-      state.repos = store.state.repos.map((r) => {
+      state.repos = store.repos.map((r) => {
         return {
           name: r,
           visible: true,
@@ -105,30 +105,30 @@ export default defineComponent({
     });
 
     watch(
-      () => [store.state.repos, store.state.chartMode],
+      () => [store.repos, store.chartMode],
       () => {
         for (const r of state.repos) {
-          if (r.visible && !store.state.repos.includes(r.name)) {
+          if (r.visible && !store.repos.includes(r.name)) {
             state.repos.splice(state.repos.indexOf(r), 1);
           }
         }
 
         let hash = "";
-        if (store.state.repos.length > 0) {
-          hash = `#${store.state.repos.join("&")}&${store.state.chartMode}`;
+        if (store.repos.length > 0) {
+          hash = `#${store.repos.join("&")}&${store.chartMode}`;
         }
         // Sync location hash only right here
         window.location.hash = hash;
       }
     );
 
     const handleAddRepoBtnClick = () => {
-      if (store.state.isFetching) {
+      if (store.isFetching) {
         return;
       }
 
       let rawRepos = state.repo;
-      if (rawRepos === "" && store.state.repos.length === 0) {
+      if (rawRepos === "" && store.repos.length === 0) {
         rawRepos = "bytebase/star-history";
       }
 
@@ -154,8 +154,7 @@ export default defineComponent({
               toast.warn(`Repo ${repo} is already on the chart`);
             } else {
               r.visible = true;
-              store.commit(
-                "setRepos",
+              store.setRepos(
                 state.repos.filter((r) => r.visible).map((r) => r.name)
               );
             }
@@ -167,7 +166,7 @@ export default defineComponent({
           name: repo,
           visible: true,
         });
-        store.commit("addRepo", repo);
+        store.addRepo(repo);
       }
       state.repo = "";
     };
@@ -179,10 +178,7 @@ export default defineComponent({
           break;
         }
       }
-      store.commit(
-        "setRepos",
-        state.repos.filter((r) => r.visible).map((r) => r.name)
-      );
+      store.setRepos(state.repos.filter((r) => r.visible).map((r) => r.name));
     };
 
     const handleDeleteRepoBtnClick = (repo: string) => {
@@ -192,12 +188,12 @@ export default defineComponent({
           break;
         }
       }
-      store.commit("delRepo", repo);
+      store.delRepo(repo);
     };
 
     const handleClearAllRepoBtnClick = () => {
       state.repos = [];
-      store.commit("setRepos", []);
+      store.setRepos([]);
     };
 
     const handleInputerPasted = async (event: ClipboardEvent) => {

diff --git a/src/components/StarChartViewer.vue b/src/components/StarChartViewer.vue
@@ -117,7 +117,6 @@ import {
   ref,
   watch,
 } from "vue";
-import { useStore } from "vuex";
 import api from "../helpers/api";
 import toast from "../helpers/toast";
 import utils from "../helpers/utils";
@@ -126,6 +125,7 @@ import BytebaseBanner from "./BytebaseBanner.vue";
 import StarXYChart from "./Charts/StarXYChart.vue";
 import TokenSettingDialog from "./TokenSettingDialog.vue";
 import GenerateEmbedCodeDialog from "./GenerateEmbedCodeDialog.vue";
+import useAppStore from "../store";
 
 interface State {
   chartMode: "Date" | "Timeline";
@@ -159,37 +159,34 @@ export default defineComponent({
       showSetTokenDialog: false,
       showGenEmbedCodeDialog: false,
     });
-    const store = useStore<AppState>();
+    const store = useAppStore();
     const containerElRef = ref<HTMLDivElement | null>(null);
     const isFetching = computed(() => {
-      return store.state.isFetching;
+      return store.isFetching;
     });
     const chartMode = computed(() => {
-      return store.state.chartMode;
+      return store.chartMode;
     });
 
     onMounted(() => {
-      if (store.state.repos.length > 0) {
-        fetchReposStarData(store.state.repos);
+      if (store.repos.length > 0) {
+        fetchReposStarData(store.repos);
       }
     });
 
     watch(
-      () => store.state.repos,
+      () => store.repos,
       () => {
-        fetchReposStarData(store.state.repos);
+        fetchReposStarData(store.repos);
       }
     );
 
     const fetchReposStarData = async (repos: string[]) => {
-      store.commit("setIsFetching", true);
+      store.setIsFetching(true);
       for (const repo of repos) {
         if (!state.repoStarDataMap.has(repo)) {
           try {
-            const starRecords = await api.getRepoStarRecords(
-              repo,
-              store.state.token
-            );
+            const starRecords = await api.getRepoStarRecords(repo, store.token);
             state.repoStarDataMap.set(repo, starRecords);
           } catch (error: any) {
             if (error?.response?.status === 404) {
@@ -205,15 +202,15 @@ export default defineComponent({
             } else {
               toast.warn("Some unexpected error happened, try again later");
             }
-            store.commit("delRepo", repo);
+            store.delRepo(repo);
             return;
           }
         }
       }
-      store.commit("setIsFetching", false);
+      store.setIsFetching(false);
 
       const reposStarData: RepoStarData[] = [];
-      for (const repo of store.state.repos) {
+      for (const repo of store.repos) {
         const records = state.repoStarDataMap.get(repo);
         if (records) {
           reposStarData.push({
@@ -382,7 +379,7 @@ export default defineComponent({
 
     const handleExportAsCSVBtnClick = () => {
       let CSVContent = "";
-      for (const repo of store.state.repos) {
+      for (const repo of store.repos) {
         const records = state.repoStarDataMap.get(repo);
         if (records) {
           const temp: any[] = [];
@@ -412,7 +409,7 @@ export default defineComponent({
     };
 
     const handleShareToTwitterBtnClick = async () => {
-      const repos = store.state.repos;
+      const repos = store.repos;
       if (repos.length === 0) {
         toast.error("No repo found");
         return;
@@ -426,10 +423,7 @@ export default defineComponent({
         let starCount = 0;
 
         try {
-          const { data } = await api.getRepoStargazersCount(
-            repo,
-            store.state.token
-          );
+          const { data } = await api.getRepoStargazersCount(repo, store.token);
           starCount = data.stargazers_count;
         } catch (error) {
           // do nth
@@ -468,11 +462,8 @@ export default defineComponent({
     };
 
     const handleToggleChartBtnClick = () => {
-      store.commit(
-        "setChartMode",
-        chartMode.value === "Date" ? "Timeline" : "Date"
-      );
-      fetchReposStarData(store.state.repos);
+      store.setChartMode(chartMode.value === "Date" ? "Timeline" : "Date");
+      fetchReposStarData(store.repos);
     };
 
     const handleSetTokenDialogClose = () => {

diff --git a/src/components/TokenSettingDialog.vue b/src/components/TokenSettingDialog.vue
@@ -72,8 +72,8 @@
 
 <script lang="ts">
 import { defineComponent, reactive } from "vue";
-import { useStore } from "vuex";
 import storage from "../helpers/storage";
+import useAppStore from "../store";
 import Dialog from "./Dialog.vue";
 
 interface State {
@@ -85,13 +85,13 @@ export default defineComponent({
   components: { Dialog },
   emits: ["close"],
   setup(_, { emit }) {
-    const store = useStore<AppState>();
+    const store = useAppStore();
     const state = reactive<State>({
-      token: store.state.token,
+      token: store.token,
     });
 
     const handleSaveTokenBtnClick = () => {
-      store.commit("setToken", state.token);
+      store.setToken(state.token);
       storage.set({
         accessTokenCache: state.token,
       });
@@ -104,7 +104,7 @@ export default defineComponent({
 
     return {
       state,
-      tokenCache: store.state.token,
+      tokenCache: store.token,
       handleSaveTokenBtnClick,
       handleCloseBtnClick,
     };

diff --git a/src/main.ts b/src/main.ts
@@ -1,9 +1,9 @@
 import { createApp } from "vue";
 import router from "./router";
-import store from "./store";
 import App from "./App.vue";
+import { piniaInstance } from "./store";
 import "./css/index.css";
 
 const app = createApp(App);
 
-app.use(router).use(store).mount("#app");
+app.use(router).use(piniaInstance).mount("#app");