vuejs3pinax

Getter does not update when route param updates


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)
    }
  }

Solution

  • 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>