我正在尝试在创建组件时为某些状态设置默认值。在实践中,如果用户未通过用户输入指定首选语言prefLang
,则希望它们基于navigator.language
。
虽然在使用Vuex之前确实可以使用此方法,但是我目前的方法无法使用。我没有收到任何错误,但是发生的是,正在渲染针对prefLanf
,UNDEF
设置的当前默认值,而不是导航.language的输出。
问题变为:在没有用户输入的情况下,如何为某些状态属性设置初始值?
下面是我正在使用的代码的过度简化表示:
store.js
const state ={
userData: {
prefLang: "UNDEF"
// some other data..
}
}
const getters = {
defaultLang: () => { navigator.language.slice(0,2) }
}
const actions = {
setDefaultLang({ state, getters }) {
state.userData.prefLang = getters.defaultLang
}
}
Chat.vue
<template>
<div class="chat-display">
<p>{{ this.userData.prefLang }}</p>
</div>
</template>
<script>
import { mapGetters, mapActions, mapState } from 'vuex'
export default {
name: 'chat-display',
created() {
this.store.dispatch('setDefaultLang')
},
computed: {
...mapGetters([
'defaultLang'
]),
...mapState([
'userData'
])
},
methods: {
...mapActions([
'setDefaultLang'
])
}
</script>
谢谢。
答案 0 :(得分:0)
发现问题-没有在我的吸气剂中返回navigator.language的值
答案 1 :(得分:0)
这里是运行示例:https://codepen.io/ptcmariano/pen/jQZmWW
const mapGetters = Vuex.mapGetters;
const mapActions = Vuex.mapActions;
const mapState = Vuex.mapState;
const store = new Vuex.Store({
state: {
userData: {
prefLang: "UNDEF"
// some other data..
}
},
getters: {
defaultLang: () => { return navigator.language.slice(0,2) }
},
actions: {
setDefaultLang({ state, getters }) {
state.userData.prefLang = getters.defaultLang
}
}
});
new Vue({
el: "#app",
store: store,
template: `<div class="chat-display"> <p> lang: {{ this.userData.prefLang }}</p> </div>`,
created() {
this.$store.dispatch('setDefaultLang')
},
computed: {
...mapGetters([
'defaultLang'
]),
...mapState([
'userData'
])
},
methods: {
...mapActions([
'setDefaultLang'
])
}
});
#app