Is it a bad idea to use one store per keyed object instance?

[cory-weiner]

I am thinking through how I want to design my data store in a new app.

My app has many models coming from the backend (customers, invoices, comments, etc).

Would it be a bad idea to create a store instance for each instance of customer? For example, instead of useCustomersStore which houses an array of customers, I am thinking of having useCustomerStore which is specific to each customer:

export const useCustomerStore = (id, props) => {
    return defineStore(`customer/${id}`, {
        state: () => {
            return { 
                id,
                name: props.name,
                phone: props.phone
             }
        },
        getters: {
            contactInfo(state){
                return `${state.name} has phone number ${state.phone}`
            }
        },
        actions: {
            save() {
                // Persist current customer state
            },
            refresh(){
                // Refresh customer from api
            }
        },
    })()
}

I have potentially 10k+ customers which could be loaded in this way, so thus it would create 10k+ keyed stores customer/1, customer/2, customer/3 etc.

The reason I would like to do this is to leverage computed properties at the row level, for example contactInfo getter above. I also prefer having a save() action on the individual customer, rather than a save(instance) action on a list type store.

Thoughts? Is this a bad idea? Are there better ways to accomplish what I'm thinking?

[posva]

Yes, it's usually a bad idea. You have other patterns to do this kind of things like classes (with custom serializers if doing SSR) or passing the id as an argument

[stanleyxu2005]

If this is not a good idea, what is the best practice to manage N customer models?
I'm like to see an example from homepage or somewher else. Could you share some?

I have similar issue. Let me create an example

class Customer {
  constructor(name, orders) {
    this.name = name
    this.orders = orders
  }  
  getOrders({ignoreCancelled = false} = {}) {
    return ignoreCancelled 
       ? this.orders.filter(order => !order.cancelled)
       : this.orders
  }
  addOrder(order) {
    this.orders.push(order)
  }
}

<template>
  <h1>Cancelled orders</h1>
  <div v-for="(orders, i) in customer.getOrders({ ignoreCancelled: true })">
     {{i}} {{order.datetime}}
   </div>
   <button @click="customer.addOrder({name: 'new order'})"> Add new order </button>
</template>
<script>
export default {
  props: {
    customer: {type: Object, require: true, default: null}
  },
}
</script>

If I show all cancelled orders in a component and then I add a new cancelled order, the state is not changed. It seems the reactivity is lost. Not sure what is the correct way to handle.