feat: save lang to localStorage

src/components/Navbar.vue

@@ -9,18 +9,18 @@
       /></button-icon>
     </div>
     <div class="navigation-links">
-      <router-link to="/" :class="{ active: this.$route.name === 'home' }"
-        >{{ $t('nav.home') }}</router-link
-      >
+      <router-link to="/" :class="{ active: this.$route.name === 'home' }">{{
+        $t("nav.home")
+      }}</router-link>
       <router-link
         to="/explore"
         :class="{ active: this.$route.name === 'explore' }"
-        >{{ $t('nav.explore') }}</router-link
+        >{{ $t("nav.explore") }}</router-link
       >
       <router-link
         to="/library"
         :class="{ active: this.$route.name === 'library' }"
-        >{{ $t('nav.library') }}</router-link
+        >{{ $t("nav.library") }}</router-link
       >
     </div>
     <div class="right-part">
@@ -42,8 +42,7 @@
         </div>
       </div>
       <div class="locale-changer" @click="changeLang">
-        <svg-icon icon-class="translation" class="translation"
-      />
+        <svg-icon icon-class="translation" class="translation" />
       </div>
     </div>
   </nav>
@@ -55,13 +54,13 @@ import ButtonIcon from "@/components/ButtonIcon.vue";
 export default {
   name: "Navbar",
   components: {
-    ButtonIcon,
+    ButtonIcon
   },
   data() {
     return {
       inputFocus: false,
       keywords: "",
-      langs: ['zh-CN', 'en']
+      langs: ["zh-CN", "en"]
     };
   },
   methods: {
@@ -71,19 +70,27 @@ export default {
     },
     goToSearchPage() {
       if (!this.keywords) return;
-      if (this.$route.name === 'search' && this.$route.query.keywords === this.keywords) return;
+      if (
+        this.$route.name === "search" &&
+        this.$route.query.keywords === this.keywords
+      )
+        return;
       this.$router.push({
         name: "search",
-        query: { keywords: this.keywords },
+        query: { keywords: this.keywords }
       });
     },
     changeLang() {
+      let lang = "";
       if (this.$i18n.locale === "zh-CN") {
-        return this.$i18n.locale = "en";
+        lang = "en";
+      } else {
+        lang = "zh-CN";
+      }
+      this.$i18n.locale = lang;
+      this.$store.commit("changeLang", lang);
     }
-      this.$i18n.locale = "zh-CN";
   }
-  },
 };
 </script>
 
@@ -215,6 +222,4 @@ nav {
     width: 48px;
   }
 }
-
-
 </style>

src/locale/index.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import VueI18n from "vue-i18n";
+import store from "@/store";
 
 import en from "./lang/en.js";
 import zhCN from "./lang/zh-CN.js";
@@ -7,7 +8,7 @@ import zhCN from "./lang/zh-CN.js";
 Vue.use(VueI18n);
 
 const i18n = new VueI18n({
-  locale: "en",
+  locale: store.state.settings.lang,
   messages: {
     en,
     "zh-CN": zhCN

src/store/index.js

@@ -13,8 +13,7 @@ if (localStorage.getItem("appVersion") === null) {
   window.location.reload();
 }
 
-Vue.use(Vuex);
-const saveToLocalStorage = (store) => {
+const saveToLocalStorage = store => {
   store.subscribe((mutation, state) => {
     // console.log(mutation);
     localStorage.setItem("player", JSON.stringify(state.player));
@@ -22,20 +21,28 @@ const saveToLocalStorage = (store) => {
   });
 };
 
+Vue.use(Vuex);
 const store = new Vuex.Store({
   state: state,
   mutations,
   actions,
-  plugins: [saveToLocalStorage],
+  plugins: [saveToLocalStorage]
 });
 
 store.state.howler = new Howl({
   src: [
-    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`,
+    `https://music.163.com/song/media/outer/url?id=${store.state.player.currentTrack.id}`
   ],
   html5: true,
-  format: ["mp3"],
+  format: ["mp3"]
 });
 Howler.volume(store.state.player.volume);
 
+if ([undefined, null].includes(store.state.settings.lang)) {
+  let lang = "en";
+  if (navigator.language.slice(0, 2) === "zh") lang = "zh-CN";
+  store.state.settings.lang = lang;
+  localStorage.setItem("settings", JSON.stringify(store.state.settings));
+}
+
 export default store;

src/store/initState.js

@@ -1,11 +1,11 @@
 const initState = {
   howler: null,
   liked: {
-    songs: [],
+    songs: []
   },
   contextMenu: {
     clickObjectID: 0,
-    showMenu: false,
+    showMenu: false
   },
   player: {
     enable: false,
@@ -26,51 +26,51 @@ const initState = {
           "https://p1.music.126.net/kHNNN-VxufjlBtyNPIP3kg==/109951165306614548.jpg",
         tns: [],
         pic_str: "109951165306614548",
-        pic: 109951165306614540,
+        pic: 109951165306614540
       },
       time: 196022,
-      playable: true,
+      playable: true
     },
     notShuffledList: [],
     list: [],
     listInfo: {
       type: "",
-      id: "",
-    },
+      id: ""
+    }
   },
   settings: {
     playlistCategories: [
       {
         name: "全部",
-        enable: true,
+        enable: true
       },
       {
         name: "推荐歌单",
-        enable: true,
+        enable: true
       },
       {
         name: "精品歌单",
-        enable: true,
+        enable: true
       },
       {
         name: "官方",
-        enable: true,
+        enable: true
       },
       {
         name: "流行",
-        enable: true,
+        enable: true
       },
       {
         name: "电子",
-        enable: true,
+        enable: true
       },
       {
         name: "摇滚",
-        enable: true,
+        enable: true
       },
       {
         name: "ACG",
-        enable: true,
+        enable: true
       },
       // {
       //   name: "最新专辑",
@@ -78,13 +78,14 @@ const initState = {
       // },
       {
         name: "排行榜",
-        enable: true,
-      },
+        enable: true
+      }
     ],
     user: {
-      id: 0,
-    },
+      id: 0
     },
+    lang: null
+  }
 };
 
 export default initState;

src/store/mutations.js

@@ -13,7 +13,7 @@ export default {
     state.howler = new Howl({
       src: [mp3],
       autoplay: true,
-      html5: true,
+      html5: true
     });
     state.howler.play();
   },
@@ -28,7 +28,7 @@ export default {
     state.player.repeat = status;
   },
   appendTrackToPlayerList(state, { track, playNext = false }) {
-    let existTrack = state.player.list.find((t) => t.id === track.id);
+    let existTrack = state.player.list.find(t => t.id === track.id);
     if (
       (existTrack === null || existTrack === undefined) &&
       playNext === false
@@ -38,7 +38,7 @@ export default {
     }
 
     // 把track加入到正在播放歌曲的下一首位置
-    state.player.list = state.player.list.map((t) => {
+    state.player.list = state.player.list.map(t => {
       if (t.sort > state.player.currentTrack.sort) {
         t.sort = t.sort + 1;
       }
@@ -54,10 +54,10 @@ export default {
     state.player.shuffle = true;
 
     let newSorts = shuffleAList(
-      state.player.list.filter((t) => t.sort > state.player.currentTrack.sort)
+      state.player.list.filter(t => t.sort > state.player.currentTrack.sort)
     );
 
-    state.player.list = state.player.list.map((track) => {
+    state.player.list = state.player.list.map(track => {
       if (newSorts[track.id] !== undefined) track.sort = newSorts[track.id];
       return track;
     });
@@ -68,7 +68,7 @@ export default {
       JSON.stringify(state.player.notShuffledList)
     );
     state.player.currentTrack.sort = state.player.list.find(
-      (t) => t.id === state.player.currentTrack.id
+      t => t.id === state.player.currentTrack.id
     ).sort;
   },
   shuffleTheListBeforePlay(state) {
@@ -76,7 +76,7 @@ export default {
       JSON.stringify(state.player.list)
     );
     let newSorts = shuffleAList(state.player.list);
-    state.player.list = state.player.list.map((track) => {
+    state.player.list = state.player.list.map(track => {
       track.sort = newSorts[track.id];
       return track;
     });
@@ -91,13 +91,16 @@ export default {
     state.liked.songs = trackIDs;
   },
   switchSortBetweenTwoTracks(state, { trackID1, trackID2 }) {
-    let t1 = state.player.list.find((t) => t.id === trackID1);
-    let t2 = state.player.list.find((t) => t.id === trackID2);
+    let t1 = state.player.list.find(t => t.id === trackID1);
+    let t2 = state.player.list.find(t => t.id === trackID2);
     let sorts = [t1.sort, t2.sort];
-    state.player.list = state.player.list.map((t) => {
+    state.player.list = state.player.list.map(t => {
       if (t.id === t1.id) t.sort = sorts[1];
       if (t.id === t2.id) t.sort = sorts[0];
       return t;
     });
   },
+  changeLang(state, lang) {
+    state.settings.lang = lang;
+  }
 };