Установка начальных значений для созданного () с помощью Vuex

Question

Я пытаюсь установить значение по умолчанию для некоторого состояния при создании компонента.На практике я хочу, чтобы предпочтительный язык пользователя prefLang основывался на navigator.language, если они не указали это через пользовательский ввод.

Мой текущий подход не работает, хотя раньше у меня это работалопереходит на использование Vuex.Я не получаю ошибок, но происходит то, что текущее значение по умолчанию, установленное для prefLanf, UNDEF, отображается вместо вывода navigate.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>

Спасибозаранее.

Answer 1

Обнаружил некоторые проблемы в примере:

• функция defaultLagn не возвращает
• доступ к хранилищу без этого. $ Store в компоненте

здесь работает пример: 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

Answer 2

Найдена проблема - не возвращалось значение navigator.language в моем геттере