使用 Vuex 在 created() 上设置“starter”值答案

【问题标题】：Setting "starter" values on created() with Vuex使用 Vuex 在 created() 上设置“starter”值
【发布时间】：2019-04-24 09:07:41
【问题描述】：

我正在尝试在创建组件时为某些状态设置默认值。在实践中，我希望用户的首选语言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>

提前致谢。

【问题讨论】：

标签： javascript vue.js vuex

【解决方案1】：

在例子中发现了一些问题：

函数 defaultLagn 未返回
没有 this.$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

【讨论】：

【解决方案2】：

发现问题 - 在我的 getter 中没有返回 navigator.language 的值

【讨论】：