From 281f9fe0bce58799ecabb5ad97db9fce9e841c51 Mon Sep 17 00:00:00 2001
From: qier222 <68148142+qier222@users.noreply.github.com>
Date: Thu, 22 Oct 2020 18:13:48 +0800
Subject: [PATCH] feat: save lang to localStorage
---
src/components/Navbar.vue | 37 +++++++++++++++++++++----------------
src/locale/index.js | 3 ++-
src/store/index.js | 17 ++++++++++++-----
src/store/initState.js | 37 +++++++++++++++++++------------------
src/store/mutations.js | 23 +++++++++++++----------
5 files changed, 67 insertions(+), 50 deletions(-)
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index afa9d2f..60fc25b 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -9,18 +9,18 @@
/>
- {{ $t('nav.home') }}
+ {{
+ $t("nav.home")
+ }}
{{ $t('nav.explore') }}{{ $t("nav.explore") }}
{{ $t('nav.library') }}{{ $t("nav.library") }}
@@ -42,8 +42,7 @@
-
+
@@ -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 = "zh-CN";
+ this.$i18n.locale = lang;
+ this.$store.commit("changeLang", lang);
}
- },
+ }
};
@@ -215,6 +222,4 @@ nav {
width: 48px;
}
}
-
-
diff --git a/src/locale/index.js b/src/locale/index.js
index 0a62566..34c3548 100644
--- a/src/locale/index.js
+++ b/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
diff --git a/src/store/index.js b/src/store/index.js
index 836ebcb..081fb29 100644
--- a/src/store/index.js
+++ b/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;
diff --git a/src/store/initState.js b/src/store/initState.js
index bdec04f..eaf8144 100644
--- a/src/store/initState.js
+++ b/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;
diff --git a/src/store/mutations.js b/src/store/mutations.js
index a682155..b8f1b0f 100644
--- a/src/store/mutations.js
+++ b/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;
+ }
};