How To Get States From A Vuex Store From Within A Vuetify List, Vuejs
I have a Vue file that looks like so : import store from '@/store' export default{ name: 'myList', data: () => ({ show: true, listContent: [{
Solution 1:
Why do you want the value
to be a function that returns the state value. You can just assign it to state
value using this.$store.state.myStore.settings.one
For this to work make the data
option a normal function instead of an arrow function so that this
still represents the vue instance
export default {
name: "myList",
data() {
return {
show: true,
listContent: [
{
name: "1",
icon: "person",
value: this.$store.state.myStore.settings.one
},
{
name: "2",
icon: "person",
value: this.$store.state.myStore.settings.two
},
{
name: "3",
icon: "person",
value: this.$store.state.myStore.settings.three
}
]
};
}
};
Solution 2:
May be this will help. Long one, but it works.
const myModule = {
state: {
test: "modulle",
settings: {
one: "This is one",
two: "This is two",
three: "This is three"
}
}
};
const store = newVuex.Store({
modules: { myModule }
});
newVue({
el: "#app",
store,
data() {
return {
listContent: [
{
name: "1",
icon: "person",
value: null
},
{
name: "2",
icon: "person",
value: null
},
{
name: "3",
icon: "person",
value: null
}
]
};
},
watch:{
'$store.state.myModule.settings.one':{
immediate:true,
handler:function(value){
this.listContent[0].value = value;
}
},
'$store.state.myModule.settings.two':{
immediate:true,
handler:function(value){
this.listContent[1].value = value;
}
},
'$store.state.myModule.settings.three':{
immediate:true,
handler:function(value){
this.listContent[2].value = value;
}
},
}
});
Post a Comment for "How To Get States From A Vuex Store From Within A Vuetify List, Vuejs"