How to handle complex objects and non-reactive in store

[Wewill]

Hi everyone,

I have to build a store with some different needs :

— Some objects will be complex and I need reactivity on it

{
  "Stream": {
    "StreamID": 4859363,
    "Operations": [
      {
        "OperationID": 4672,
        "OperationType": "C",
        "OperationDate": "2023-01-10T00:00:00",
        "OperationCMR": "1344",
        "OperationStatus": "M",
        "MyRole": "C",
        "Manifest": [],
        "Partners": [
          {
            "PartnerID": 216323,
            "PartnerRole": "T",
            "PartnerFullName": null
          },
          {
            "PartnerID": 100099,
            "PartnerRole": "C",
            "PartnerFullName": null
          }
        ],
        "POVs": null,
      }
    ]
  },
  "Messages": [],
  "OperationID": 2697,
  "OperationType": "C",
  "OperationDate": "2023-01-10T00:00:00+01:00",
  "OperationCMR": "35790",
  "OperationStatus": "M",
  "MyRole": "C",
  "Creation": {
    "PartnerID": 216323,
    "UserName": null,
    "DateTime": "2023-01-10T10:01:00"
  },
  "Modification": {
    "PartnerID": 456789,
    "UserName": null,
    "DateTime": "2023-01-10T10:01:00"
  },
  "Manifest": [],
  "Partners": [
    {
      "PartnerID": 67890,
      "PartnerRole": "T",
      "PartnerFullName": null,
      "Name": "Transport"
    },
    {
      "PartnerID": 12345,
      "PartnerRole": "C",
      "PartnerFullName": null,
      "Name": "Marseille"
    }
  ],
  "POVs": [
    {
      "Role": "T",
      "OperationDate": "2023-01-10T00:00:00",
      "CMR": "123456",
      "Pallets": [
        {
          "PalletID": 1001,
          "FP": 0,
          "FR": 200,
          "PalletName": "Pal EUR EPAL"
        }
      ],
      "LastModifiedByUser": null,
      "LastModifiedAt": "2023-01-10T10:01:00"
    },
    {
      "isDraft": true,
      "Role": "C",
      "Pallets": [
        {
          "PalletID": 1001,
          "PalletName": "EUR,
          "ValidatedFP": false,
          "ValidatedFR": false
        }
      ]
    }
  ],
  "HasDoc": null,
}

How to replace entirely this object by a new one without losing reactivity ? Like new operation
How to replace / empty a specific key without losing reactivity ? Like modify operation
How to empty a specific key without losing reactivity ? Like blank operation

— Some object have to be non reactive
I need to fetch and store them and then use them but I don't want them to be reactive / modified ...

"Countries": [
      {
        "ISO2": "DZ",
        "Name": "Algérie"
      },
      {
        "ISO2": "DE",
        "Name": "Allemagne"
      },
      {
        "ISO2": "AD",
        "Name": "Andorre"
      },
      {
        "ISO2": "AT",
        "Name": "Autriche"
      },
      {
        "ISO2": "BY",
        "Name": "Bélarus"
      },
      {
        "ISO2": "BE",
        "Name": "Belgique"
      },
...

How to store a non reactive object in Pinia ?

Thanks a lot for your help 👍
Best regards,
Wilhem

[Wewill]

Hello,

I found a way to handle non-reactive objects :
I started looking around store and pinia, and finally found the way to make it via immer.
https://vuejs.org/guide/extras/reactivity-in-depth.html#immutable-data

Store :

// Project : fetch data in store 
import { defineStore, acceptHMRUpdate } from 'pinia';
import { shallowRef, markRaw } from 'vue';
import { useAuthStore } from "@/stores/auth";
import ApiService from "@/core/services/ApiService";

const authStore = useAuthStore();

/**
 * Customers store
 */

export const useCustomersStore = defineStore({
  id: 'customers',
  state: () => ({
    customers: shallowRef([] as Array<ICustomer>), // Make it non-reactive > using shallowRef is best but  it become reactive at some point, using markRaw here same
  }),
  getters: {
    items: (state) => state.customers,
  },
  actions: {
    async fetchCustomers(forceReload:boolean = false) {
      if ( forceReload === true || this.customers.length === 0) {
      // Make sure we get auth and an hotelId
      await authStore.verifyHotelId()
      .then((hotelId) => {  
        // HotelId as been received ( and auth is authenticated )
        // Fetch data
        ApiService
        .mget([{resource: "/hotels", slug: hotelId}, {resource: "/customers"}])      
        .then((response) => {
          console.log("Fetching::", response)
          if (typeof response.data != "undefined")
            this.customers = markRaw(response.data.map(d => markRaw(d))); // Make it non-reactive
        })
        .catch(({ response }) => {
          console.error(response.data.errors);
        });
      })
      .catch((error) => { console.error("fetchCustomers+verifyHotelId::ERROR", error) })
    } 
    else console.info("fetchCustomers:: Already loaded", this.customers.length);
    }
  },
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useCustomersStore, import.meta.hot))
}

Component :

<script lang="ts">
import { defineComponent, ref, toRefs, reactive, computed, onMounted, markRaw, isReactive } from "vue";
....
import { useCustomersStore } from "@/stores/_project"
import produce from "immer";

export default defineComponent({
  name: "customers",
  components: {
...
  },
  setup() {
    const customersStore = useCustomersStore();

    // Fetch data from store
    async function fetchCustomersStore() {
      await customersStore.fetchCustomers().then(() => {
        // Produce a non-reactive object using immer 
        tableData.value = produce(customersStore.items, draft => {});
        // SUCCESS ! 
      });
    }

    onMounted(() => {
      fetchCustomers(); // Execute fetch on mounted
    });

...

    return {
      tableData,
    };
  },
});
</script>

I still need assistance on proper ways to mutate datas in store ? Do I have to user patch ?

How to replace entirely this object by a new one without losing reactivity ? Like new operation
How to replace / empty a specific key without losing reactivity ? Like modify operation
How to empty a specific key without losing reactivity ? Like blank operation

Hope it's a proper method and hope it could help !
Thanks a lot !
Best regards,
Wilhem