Setting “starter” values on created() with Vuex
I'm trying to setup a default value for some state when a component is created. In practice, I want the user's preferred language prefLang to be based on navigator.language if they have not specified this through the user input.
My current approach is not working, though I did have this working before moving to use Vuex. I am getting no errors, but what is happening is that the current default value set against prefLanf, UNDEF, is being rendered instead of the output of navigate.language.
The question becomes: how do I set an initial value for some of the state properties in the absence of user input?
Below is an overly simplified representation of the code I'm working with:
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>
Thanks in advance.
javascript vue.js vuex
asked Nov 21 '18 at 18:06
S SaidS Said
164
add a comment |
I'm trying to setup a default value for some state when a component is created. In practice, I want the user's preferred language prefLang to be based on navigator.language if they have not specified this through the user input.
My current approach is not working, though I did have this working before moving to use Vuex. I am getting no errors, but what is happening is that the current default value set against prefLanf, UNDEF, is being rendered instead of the output of navigate.language.
The question becomes: how do I set an initial value for some of the state properties in the absence of user input?
Below is an overly simplified representation of the code I'm working with:
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>
Thanks in advance.
javascript vue.js vuex
asked Nov 21 '18 at 18:06
S SaidS Said
164
add a comment |
I'm trying to setup a default value for some state when a component is created. In practice, I want the user's preferred language prefLang to be based on navigator.language if they have not specified this through the user input.
My current approach is not working, though I did have this working before moving to use Vuex. I am getting no errors, but what is happening is that the current default value set against prefLanf, UNDEF, is being rendered instead of the output of navigate.language.
The question becomes: how do I set an initial value for some of the state properties in the absence of user input?
Below is an overly simplified representation of the code I'm working with:
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>
Thanks in advance.
javascript vue.js vuex
asked Nov 21 '18 at 18:06
S SaidS Said
164
I'm trying to setup a default value for some state when a component is created. In practice, I want the user's preferred language prefLang to be based on navigator.language if they have not specified this through the user input.
My current approach is not working, though I did have this working before moving to use Vuex. I am getting no errors, but what is happening is that the current default value set against prefLanf, UNDEF, is being rendered instead of the output of navigate.language.
The question becomes: how do I set an initial value for some of the state properties in the absence of user input?
Below is an overly simplified representation of the code I'm working with:
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>
Thanks in advance.
javascript vue.js vuex
javascript vue.js vuex
asked Nov 21 '18 at 18:06
S SaidS Said
164
asked Nov 21 '18 at 18:06
S SaidS Said
164
asked Nov 21 '18 at 18:06
S SaidS Said
164
asked Nov 21 '18 at 18:06
S SaidS Said
164
asked Nov 21 '18 at 18:06
S SaidS Said
164
164
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Found the problem - was not returning the value of navigator.language in my getter
answered Nov 21 '18 at 18:24
S SaidS Said
164
add a comment |
Found some problems in example:
- function defaultLagn not returning
- acess store without this.$store in component
here a example running: 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'
])
}
});#appanswered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418128%2fsetting-starter-values-on-created-with-vuex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Found the problem - was not returning the value of navigator.language in my getter
answered Nov 21 '18 at 18:24
S SaidS Said
164
add a comment |
Found the problem - was not returning the value of navigator.language in my getter
answered Nov 21 '18 at 18:24
S SaidS Said
164
add a comment |
Found the problem - was not returning the value of navigator.language in my getter
answered Nov 21 '18 at 18:24
S SaidS Said
164
Found the problem - was not returning the value of navigator.language in my getter
answered Nov 21 '18 at 18:24
S SaidS Said
164
answered Nov 21 '18 at 18:24
S SaidS Said
164
answered Nov 21 '18 at 18:24
S SaidS Said
164
answered Nov 21 '18 at 18:24
S SaidS Said
164
164
add a comment |
add a comment |
Found some problems in example:
- function defaultLagn not returning
- acess store without this.$store in component
here a example running: 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'
])
}
});#appanswered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
add a comment |
Found some problems in example:
- function defaultLagn not returning
- acess store without this.$store in component
here a example running: 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'
])
}
});#appanswered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
add a comment |
Found some problems in example:
- function defaultLagn not returning
- acess store without this.$store in component
here a example running: 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'
])
}
});#appanswered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
Found some problems in example:
- function defaultLagn not returning
- acess store without this.$store in component
here a example running: 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'
])
}
});#appconst 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'
])
}
});#appconst 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'
])
}
});#appanswered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
answered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
answered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
answered Nov 21 '18 at 18:46
Paulo Tiago MarianoPaulo Tiago Mariano
1587
1587
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418128%2fsetting-starter-values-on-created-with-vuex%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
