刷新页面后Vue 3手表无法工作

Question

我正在尝试使vue应用程序有两种语言可用，我正在使用localstorage和store来保存所选的语言。

一切似乎都很完美，在用户刚刚登录后，默认语言显示在两个组件中，当我点击第二种语言时，两个组件的观察者都处于活动状态，并会做出反应并更新文本。然而，当我刷新页面，点击另一种语言时，它只在导航栏组件上改变，而在主页组件上没有改变，当我控制台登录setter时，我得到了所选的语言，但主页组件上的观察程序没有触发。当我注销并刷新并重新启动一切时，它一直工作到我刷新为止。我在这里少了什么？

商店：

const localLanguage = localStorage.getItem('xx-user-language')
const state = () => ({
userLanguage: undefined,
});
const getters = {
getUserLanguage(state) {
if(localLanguage !== null && localLanguage !== undefined){
return localLanguage
}
return state.userLanguage;
},
};

const mutations = {
setUserLanguage(state, data) {
localStorage.setItem('xx-user-language', data)
console.log("setter " + data)
state.userLanguage = data;
},
};

导航栏组件：

HTML:

<div title="deutsch" class="icon-container">
<img @click="setLanguage('de')" src="german.png" alt="deutsch">
</div>
<div title="english" class="icon-container">
<img @click="setLanguage('en')" src=".english.png" alt="english">
</div>

JS:

computed:{
...mapGetters('language',{
getUserLanguage:"getUserLanguage"
})
},
watch:{
getUserLanguage: function(newValue){
this.setLanguage(newValue)
}
},
methods: {
setLanguage(lang){
this.setUserLanguage(lang)
this.text = text.navbar[lang]
},
...mapMutations('language',{
setUserLanguage:"setUserLanguage"
})
}

主页组件：JS:

computed: {
...mapGetters('language',{
getUserLanguage:"getUserLanguage"
})
},
watch: {
getUserLanguage: function(newValue){
console.log("home watcher" + newValue)
this.setLanguage(newValue)
}
},
methods: {
setLanguage(lang){
this.text = text.homepage[lang]
},
},

Answer 1

您的Vuex getter错误。它一定是这样的：

const state = () => ({
userLanguage: localStorage.getItem('xx-user-language'),
});
const getters = {
getUserLanguage(state) {
return state.userLanguage;
},
};