Store state not showing in devtools when using setup syntax + $patch support and expected behaviour

[goodpixels]

I've got a store created with setup syntax and despite the fact it's working correctly, the state is not showing in devtools, please refer to the screenshot below:

As you can see, the state shows as empty, although getters return correct data. Is this intentional or is this a bug?

I've defined customer data in the store like this:

const customerState = ref({})
const setCustomerData = (customer) => (customerState.value = customer)

Since I retrieve customer data from an API, I just replace the entire state with my custom setCustomerData function, but I've also read there's a $patch function on the instance and that it could do the same trick, but I am not sure if it can be used with setup syntax?

Looking at the (scarce) documentation and Github issues / discussions I was unable to find a definite answer.

The question is:

• can $patch be used in setup stores
• if yes, then how should it be used
• and what is its actual behaviour

I'm using devtools 6.5.0 with Pinia 0.4.11 for Nuxt 3.3.4.

Thanks.

[posva]

It could be that you are not returning the state like it should be: https://pinia.vuejs.org/core-concepts/#Setup-Stores

[goodpixels]

Thanks for a quick reply.

I definitely am returning the state, here's a stripped down version of my store:

Setup syntax

import { defineStore } from "pinia"
import axios from "axios"

export const useSessionStore = defineStore("session", () => {
  const customerState = ref({})

  const setCustomer = (customer) => (customerState.value = customer)
  
  const customer = computed(() => customerState.value)

  const fullName = computed(() => [customerState.value.first_name, customerState.value.last_name].join(" ").trim())

  const isLoggedIn = computed(() => (customerState.value && customerState.value.id ? true : false))

  const api = axios.create({
    baseURL: "http://localhost:3000/api/auth",
  })

  async function login({ email, password }) {
    const { data } = await api.post("login", {
      email,
      password,
    })

    setCustomer(data.customer)
  }

  return {
    customer,
    fullName,
    isLoggedIn,
    login,
  }
})

No state in devtools:

Options API

import { defineStore } from "pinia"
import axios from "axios"

const api = axios.create({
  baseURL: "http://localhost:3000/api/auth",
})

export const useSessionStore = defineStore("session", {
  state: () => ({
    customerState: {},
  }),

  getters: {
    customer: (state) => state.customerState.value,

    fullName: (state) => [state.customerState.value.first_name, state.customerState.value.last_name].join(" ").trim(),

    isLoggedIn: (state) => (state.customerState.value && state.customerState.value.id ? true : false),
  },

  actions: {
    setCustomer(customer) {
      this.customerState = customer
    },

    async login({ email, password }) {
      const { data } = await api.post("login", {
        email,
        password,
      })

      this.setCustomer(data.customer)
    },
  },
})

State shows correctly in devtools:

For clarification, the same store written with Options API shows state correctly upon inspecting in devtools.

[goodpixels]

OKAY MY BAD. You were right - I missed the fact that I am NOT returning the customerState, but instead I am returning a getter!

I feel silly now. I wouldn't pick it up without you pointing it out :) Thank you!

Let's close.