Getter在路由参数更新时不更新

Question

我有一个vue3应用程序，它有一个参数化的路由和一个Pina store getter，它根据路由参数获取项目列表。

我的问题是，当路由参数更新时，我的存储值列表(通过getter获得)不会重新获得。

<script lang="ts" setup>
import {useIncStore} from "@/store/inc";
import {useRoute} from "vue-router";
const route = useRoute()
const state = Array.isArray(route.params.state) ? route.params.state[0] : route.params.state
const incStore = useIncStore();
// EDIT - Neither of these work...
const incs = incStore.getByState(state)
// const incs = computed(() => incStore.getByState(state))
</script>

当state更新时，我如何再次调用incStore.getByState(state)?如果我把{{state}}放在我的页面上，它会在路线改变时更新，但我的项目列表不会。

这是我在store中的getter:

getters: {
getByState(state) {
return (s: string) => state.records.filter((rec: any) => rec.state === s)
}
}

Answer 1

我想我应该把我的答案贴出来，因为上面的评论说我必须使用计算属性来对路由变化和路由值的变化做出反应。

<script lang="ts" setup>
import useIncStore from "@/store/inc";
import {useRoute} from "vue-router";
import {computed} from "vue";
const route = useRoute()
const incStore = useIncStore();
const state = computed({
get() {
return Array.isArray(route.params.state) ? route.params.state[0] : route.params.state
},
set() {
}
})
const incs = computed({
get() {
return incStore.getByState(state.value)
},
set() {
}
})
</script>