I have a vue3 app that has a parameterized route and a Pina store getter that gets a list of items based on the route param.
My issue is that my list of values from the store (gotten via a getter) does not get re-gotten when the route param is updated.
<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>
How can I call incStore.getByState(state)
again when state
updates? If I put {{state}}
on my page it updates when the route changes but my list of items does not.
Here is my getter in the store:
getters: {
getByState(state) {
return (s: string) => state.records.filter((rec: any) => rec.state === s)
}
}
Figured I'd post my answer, as the comments above said I had to use computed properties to react to both the route change and then the changed route value.
<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>