[英]Vuex getter reactivity issue (in combination with Vue router)
I have a Vuex
getter that is supposed to get all relevant data for the current route & then display it in Vuetify
<v-data-table>
which works completely fine when the component is created.我有一个
Vuex
getter,它应该获取当前路由的所有相关数据,然后将其显示在Vuetify
<v-data-table>
中,它在创建组件时完全可以正常工作。 However, when i create a new entry in the data Array
in the relevant state
that the getter
works with, it only fetches & displays the new entry when i navigate away from the current route.但是,当我在
getter
使用的相关state
的数据Array
中创建一个新条目时,它只会在我离开当前路线时获取并显示新条目。 I'm using the current route as a key to identify the different entries in the state
so i can display different information for the current route, hence the Vue router
.我使用当前路由作为键来识别
state
中的不同条目,因此我可以显示当前路由的不同信息,因此是Vue router
。 I'm not sure if explained my issue clearly (sorry, English is not my first language), so here's code that i think is relevant: The getter in question:我不确定是否清楚地解释了我的问题(对不起,英语不是我的第一语言),所以这是我认为相关的代码:有问题的吸气剂:
computed: {
...mapGetters({
geData: "geData"
}),
getAllData() {
return this.geData[this.$route.path];
}
}
The data table:数据表:
<v-data-table :headers="headers" :items="getAllData" hide-actions>
<template v-slot:items="props">
<td class="text-xs-left">{{ props.item.name }}</td>
<td class="text-xs-left">{{ props.item.state}}</td>
<td class="text-xs-left">{{ props.item.created_at }}</td>
<td class="text-xs-left">{{ }}</td>
</template>
</v-data-table>
Here's how i modify the array in the store mutation
:这是我如何修改存储
mutation
中的数组:
setNewData: (state, Data) => {
state.Data[Data[0]] = Data[1];
}
The first Data[0]
is the route to be used as a key, the second Data[1]
is the new data.第一个
Data[0]
是用作键的路由,第二个Data[1]
是新数据。 I suspect the reason the getter
updates only when i navigate away from the current route is because i use the route as a key, but i'm not certain and i dont know if that's the case how to adress the issue, so any ideas, pointers are welcome, thanks in advance!我怀疑只有在我离开当前路线时才会更新
getter
的原因是因为我使用路线作为键,但我不确定,我不知道是否是这种情况如何解决问题,所以任何想法,欢迎指点,在此先感谢!
You'll need to use Vue.set
because object keys are not reactive unless first declared:您需要使用
Vue.set
,因为 object 键不响应,除非首先声明:
Vue.set(state.Data, Data[0], Data[1])
That should get you the reactivity you're looking for.这应该让你得到你正在寻找的反应性。
Side note:边注:
Make sure that state.Data
is reactive to begin with by initializing it as an object.确保
state.Data
是响应式的,首先将其初始化为 object。
Try this:尝试这个:
setNewData: (state, Data) => {
Vue.set(state.Data, Data[0], Data[1])
}
You'll need to import Vue
if you don't already have it in that file.如果该文件中还没有
Vue
,则需要导入它。
See https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats .请参阅https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats 。
I'm assuming here that you're adding a new property to the object.我在这里假设您正在向 object 添加一个新属性。 If the property already exists then you wouldn't need
Vue.set
.如果该属性已经存在,那么您将不需要
Vue.set
。
An alternative would be to copy the object, adding the new property before the new object is made reactive:另一种方法是复制 object,在新的 object 反应之前添加新属性:
setNewData: (state, Data) => {
state.Data = {
...state.Data,
[Data[0]]: Data[1]
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.