如何从Vuetify列表VueJs中的Vuex商店获取状态

Question

我有一个Vue文件，看起来像这样：

import store from '@/store'
export default{
name: 'myList',
data: () => ({
show: true,
listContent: [{
name: '1',
icon: 'person',
value: function () {
return store.state.myStore.settings.one
}
}, {
name: '2',
icon: 'person',
value: function () {
return store.state.myStore.settings.two
}
}, {
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}
]
})
}

不起作用的部分正在从"listContent"中获取"value"。

{
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}

在我的代码中，我导入了视图，就好像我要放：

this.$store.state.myStore.settings.one

在值函数中，"this"指的是对象

{
name: '3',
icon: 'person',
value: function () {
return store.state.myStore.settings.three
}
}

我也没法去商店。但是，我的代码仍然无法工作。我需要访问listContent中的商店。

列表如下所示：

<v-data-table :items="listContent" hide-actions hide-headers>
<template slot="items" slot-scope="props">    
<td>{{ props.item.name }}</td>
<td class="text-xs-right" v-text="props.item.value()">  </td>
</template>
</v-data-table>

要么我引用的存储不正确，要么模板不正确。有什么想法吗？

Answer 1

为什么希望value是一个返回状态值的函数。您可以使用this.$store.state.myStore.settings.one将其分配给state值

为了实现这一点，使data选项成为一个正常函数，而不是箭头函数，这样this仍然代表vue实例

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
}
]
};
}
};

Answer 2

这可能会有所帮助。很长，但它有效。

const myModule = {
state: {
test: "modulle",
settings: {
one: "This is one",
two: "This is two",
three: "This is three"
}
}
};
const store = new Vuex.Store({
modules: { myModule }
});
new Vue({
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;
}
},
}
});