Pattern for storing response payload Pinia store?

[brandonleichty]

Hello all 👋

I have a question around storing data from a response payload in state—and am wondering if there are any preferred / recommended patterns for this.

The first pattern (that I've seen a lot), creates state for each possible property in the API response payload like this:

export const useUserDetails = defineStore('UserDetailsStore', {
    state: () => {
      return {
        firstName: '',
        middleName: '',
        lastName: '',
        email: '',
        badgeNumber: '',
        entitlements: '',
      }
    },
  
    actions: {
      async getUser() {

        const { data } = await service.getUserDetails()
        
        this.firstName = data.userDetails.firstName
        this.middleName = data.userDetails.middleName
        this.lastName = data.userDetails.lastName
        this.email = data.userDetails.email
        this.badgeNumber = data.userDetails.badgeNumber
        this.entitlements = data.entitlements
      }
    }
})

The second pattern (that I've been personally using) looks more like this:

export const useUserDetails = defineStore('UserDetailsStore', {
    state: () => {
      return {
        user: null
      }
    },
  
    actions: {
      async getUser() {

        const { data } = await service.getUserDetails()
        this.user = data.userDetails
      }
    }
})

In this second scenario I give the entire user state to the Vue template—and let it do with it as it wants. Example: <div> {{ user.badgeNumber }} </div>.

My question: Is there a preferred Vue pattern for this? As I often see Pinia/Vuex stores that are massive because they have a piece of state for each and every property on the response payload — vs just storing the entire response.