Pinia getter does not update

Question

I have following code

<script lang="ts">
import { RouterView } from "vue-router";
import defaultLayout from "@/layouts/default.vue";
import dashboardLayout from "@/layouts/dashboard.vue";
import { useDefaultStore } from "@/stores/default";
import "./index.css";
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    let { getLayout } = useDefaultStore();

    return { getLayout };
  },
  components: { defaultLayout, dashboardLayout },
});
</script>

<template>
  {{ getLayout }}
  <component :is="getLayout">
    <RouterView />
  </component>
</template>

When i got to /dashboard my state gets updated but the getter does not for some reason, why is that?

<script setup lang="ts">
import { useDefaultStore } from "@/stores/default";
let { getUserData, SET_LAYOUT, getLayout } = useDefaultStore();
SET_LAYOUT("dashboardLayout");
</script>

Here my store:

actions: {
    SET_LAYOUT(layout: any) {
      console.log("setting layout");
      console.log(layout);
      this.layout = layout;
    },
}

I literally can see the changes inside the console but they does not get applied on the UI

Ilijanovic · Accepted Answer · 2022-03-02 13:39:58Z

25

I have found it out.

You cannot destructure your store, it loses its reactivity

let { getLayout } = useDefaultStore();

So i changed it to

let store = useDefaultStore();

and used store.getLayout and it works!

answered Mar 2, 2022 at 13:39

Ilijanovic

15k4 gold badges30 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ryan Over a year ago

Thanks! I tripped up on this same issue! I assumed to maintain reactivity only the state needed storeToRefs to when destructuring the store. However, both state and getters need it. Actions work fine without it though.

phloose Over a year ago

This is one way to handle it. Another way is pointed out by Estus Flask's comment that lets you use destructuring while maintaining reactivity

Estus Flask · Accepted Answer · 2022-03-02 17:19:39Z

14

This is covered by the documentation, this is the case for storeToRefs helper:

const { getLayout } = storeToRefs(useDefaultStore());

answered Mar 2, 2022 at 17:19

Estus Flask

227k80 gold badges478 silver badges621 bronze badges

Collectives™ on Stack Overflow

Pinia getter does not update

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related