使用Vuex在created()上设置“启动器”值

时间:2018-11-21 18:06:28

标签: javascript vue.js vuex

我正在尝试在创建组件时为某些状态设置默认值。在实践中,如果用户未通过用户输入指定首选语言prefLang,则希望它们基于navigator.language

虽然在使用Vuex之前确实可以使用此方法,但是我目前的方法无法使用。我没有收到任何错误,但是发生的是,正在渲染针对prefLanfUNDEF设置的当前默认值,而不是导航.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>

谢谢。

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

在示例中发现了一些问题:

  • 函数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