072 - 라우트쿼리와 옵션 동기화

src/views/admin/Member.vue

@@ -7,7 +7,7 @@
         :stf.sync="options.stf[0]"
         :stx.sync="options.stx[0]"
         :stc.sync="options.stc[0]"
-				class="ml-4"
+        class="ml-4"
       />
     </v-toolbar>
     <v-data-table
@@ -23,6 +23,8 @@
 <script>
 import qs from "qs";
 import SearchField from "../../components/layout/SearchField.vue";
+import axios from "axios";
+
 export default {
   components: { SearchField },
   name: "AdmMember",
@@ -69,15 +71,42 @@ export default {
           sortable: false,
         },
       ],
+      pageReady: false,
+      pageRouting: false,
+      axiosSource: null,
     };
   },
   watch: {
     options: {
       handler() {
+        if (!this.pageRouting) {
+          const opt = {
+            page: this.options.page,
+            itemsPerPage: this.options.itemsPerPage,
+            sortBy: this.options.sortBy[0],
+            sortDesc: this.options.sortDesc[0],
+            stf: this.options.stf[0] || undefined,
+            stx: this.options.stx[0] || undefined,
+            stc: this.options.stc[0] || undefined,
+          };
+          const query = qs.stringify(opt);
+          if (this.pageReady) {
+            history.pushState(null, null, `${this.$route.path}?${query}`);
+          } else {
+            history.replaceState(null, null, `${this.$route.path}?${query}`);
+          }
+        }
         this.fetchData();
       },
       deep: true,
     },
+    // "$route.query": {
+    //   handler() {
+    //     this.pageRouting = true;
+    //     this.options = this.initOptions();
+    //   },
+    //   deep: true,
+    // },
   },
   computed: {
     searchItems() {
@@ -87,28 +116,52 @@ export default {
   created() {
     this.options = this.initOptions();
   },
+  mounted() {
+    window.addEventListener("popstate", this.routeChange);
+  },
+  destroyed() {
+    window.removeEventListener("popstate", this.routeChange);
+  },
   methods: {
     initOptions() {
+      const { query } = this.$route;
       const options = {
-        page: 1,
-        itemsPerPage: 10,
-        sortBy: ["mb_create_at"],
-        sortDesc: [false],
-        stf: [""],
-        stx: [""],
-        stc: [""],
+        page: Number(query.page) || 1,
+        itemsPerPage: Number(query.itemsPerPage) || 10,
+        sortBy: [query.sortBy || "mb_create_at"],
+        sortDesc: [query.sortDesc ? query.sortDesc == "true" : false],
+        stf: [query.stf || ""],
+        stx: [query.stx || ""],
+        stc: [query.stc || ""],
       };
       return options;
     },
+    routeChange() {
+      this.pageRouting = true;
+      this.options = this.initOptions();
+    },
     async fetchData() {
+      if (this.axiosSource) {
+        this.axiosSource.cancel("fetch Data 취소");
+      }
       this.loading = true;
+      console.log("fetchData");
       const payload = { ...this.options };
       const query = qs.stringify(payload);
-      const data = await this.$axios.get(`/api/member?${query}`);
-      this.loading = false;
-      if (data) {
-        this.items = data.items;
-        this.totalItems = data.totalItems;
+      this.axiosSource = axios.CancelToken.source();
+      try {
+        const data = await this.$axios.get(`/api/member?${query}`, {
+          cancelToken: this.axiosSource.token,
+        });
+        this.loading = false;
+        this.pageReady = true;
+        this.pageRouting = false;
+        if (data) {
+          this.items = data.items;
+          this.totalItems = data.totalItems;
+        }
+      } catch (e) {
+        // console.log("request 취소", e.message);
       }
     },
   },