feat(website): remember sort-by option value for the package list

Author: favoyang

docs/.vuepress/theme/common.js

@@ -0,0 +1,12 @@
+// Common
+
+const SortType = {
+  name: "name",
+  pop: "pop",
+  createdAt: "createdAt",
+  updatedAt: "updatedAt"
+};
+
+export default {
+  SortType
+};

docs/.vuepress/theme/layouts/PackageList.vue

@@ -143,17 +143,13 @@ import { reverse, uniq } from "lodash/array";
 import { trim } from "lodash/string";
 
 import AppLayout from "@theme/layouts/AppLayout.vue";
+import common from "@theme/common";
 import LazyPackageCard from "@theme/components/LazyPackageCard.vue";
 import NavLink from "@theme/components/NavLink.vue";
 import PackageLayoutControl from "@theme/components/PackageLayoutControl.vue";
 import util from "@root/docs/.vuepress/util";
 
-const SortType = {
-  name: "name",
-  pop: "pop",
-  createdAt: "createdAt",
-  updatedAt: "updatedAt"
-};
+const SortType = common.SortType;
 
 export default {
   components: {
@@ -167,7 +163,6 @@ export default {
     return {
       active: true,
       topicValue: "",
-      sort: SortType.updatedAt,
       sortList: [
         { text: "Name", value: SortType.name },
         { text: "Popularity", value: SortType.pop },
@@ -247,8 +242,13 @@ export default {
       return query;
     },
 
-    stateText() {
-      return this.active ? "Ready to Use" : "Pending";
+    sort: {
+      get() {
+        return this.$store.getters.packageListSort;
+      },
+      set(value) {
+        this.$store.dispatch("setPackageListSort", { value });
+      }
     },
 
     sortOptions() {
@@ -261,6 +261,10 @@ export default {
       });
     },
 
+    stateText() {
+      return this.active ? "Ready to Use" : "Pending";
+    },
+
     timeField() {
       if (this.sort == SortType.createdAt) {
         return SortType.createdAt;
@@ -331,8 +335,8 @@ export default {
       this.active = this.$route.query.active != "0";
       // sort
       const sort = this.$route.query.sort;
-      if (this.sortList.map(x => x.value).includes(sort)) this.sort = sort;
-      else this.sort = SortType.updatedAt;
+      if (this.sortList.map(x => x.value).includes(sort) && sort != this.sort)
+        this.$store.dispatch("setPackageListSort", { value: sort });
       // unity
       const unity = this.$route.query.unity;
       if (this.unityOptions.map(x => x.value).includes(unity))

docs/.vuepress/theme/store.js

@@ -1,10 +1,14 @@
 import axios from "axios";
 import createPersistedState from "vuex-persistedstate";
 import urljoin from "url-join";
-import util from "@root/docs/.vuepress/util";
 import Vue from "vue";
 import Vuex from "vuex";
 
+import common from "@theme/common";
+import util from "@root/docs/.vuepress/util";
+
+const SortType = common.SortType;
+
 Vue.use(Vuex);
 
 let _store = null;
@@ -21,13 +25,15 @@ export function getStore(isServer) {
         packagesExtra: [],
         recentPackages: [],
         preferHorizontalLayout: false,
-        siteInfo: {}
+        siteInfo: {},
+        packageListSort: SortType.updatedAt
       },
       getters: {
         packagesExtra: state => state.packagesExtra,
         recentPackages: state => state.recentPackages,
         preferHorizontalLayout: state => state.preferHorizontalLayout,
-        siteInfo: state => state.siteInfo
+        siteInfo: state => state.siteInfo,
+        packageListSort: state => state.packageListSort
       },
       actions: {
         async fetchPackagesExtra({ commit }) {
@@ -73,6 +79,9 @@ export function getStore(isServer) {
         },
         setPreferHorizontalLayout({ commit }, { value }) {
           commit("setPreferHorizontalLayout", value);
+        },
+        setPackageListSort({ commit }, { value }) {
+          commit("setPackageListSort", value);
         }
       },
       mutations: {
@@ -87,6 +96,9 @@ export function getStore(isServer) {
         },
         setPreferHorizontalLayout: (state, preferHorizontalLayout) => {
           state.preferHorizontalLayout = preferHorizontalLayout;
+        },
+        setPackageListSort: (state, packageListSort) => {
+          state.packageListSort = packageListSort;
         }
       }
     });