Non-reactive state

[klausXR]

Is there a way to keep non-reactive state in a pinia store, when using either Vue 2 or 3?

[BenShelton]

Yes, you should be able to use markRaw, shallowReactive, shallowRef etc. from Vue itself to mark parts of state as non-reactive: https://v3.vuejs.org/api/basic-reactivity.html#reactive

Here is an example, note that adding items to the cart does not show reactively because the rawItems is a shallow ref. However when you click Refresh Cart they will appear as the array is reassigned, which triggers reactivity again.

[klausXR]

Is it possible to do this when using Nuxt? Because it serializes the state server-side and it seems some of the concepts get lost when it initializes again client-side. I've had this issue when using Object.freeze on parts of the state

[posva]

You might need to use https://pinia.esm.dev/api/interfaces/pinia.DefineStoreOptionsInPlugin.html#hydrate

What is the state that is non reactive? Do you have a boiled down version to check it? Maybe using https://github.com/piniajs/example-nuxt-3

[klausXR]

I'm working on an application that has a lot of data, most of which never changes, after being fetched from an API. With a lot of data and pages with many components, performance is becoming an issue and when using the Chrome Profiler, it shows that Vue is doing vast amounts of work during hydration, so I'm exploring ways of reducing the overhead. The act of converting a large object to a reactive one probably takes a lot of CPU, but in my case, its often not necessary, because the values can never change after the initial rendering.

The state is composed from objects, some of which have a lot of properties. Mutations are often not necessary, however, we reached for Vuex, because the state must be accessible in many components that do not have a parent-child relationships.

I'm now reaching for Pinia because of the simplified interface and I would really be glad if I could address this issue as well.

I looked at the hydrate function, but it seems like I would need to modify the Nuxt serializer as well and add some sort of metadata to the object, if its an instance of markRaw, for example.

Should I file an issue in the Nuxt repository, so that they have a look at it? In my opinion, if I add a reactive property via ref to Pinia/Vuex, then that should be automatically preserved when the state is serialized server-side and then hydrated client-side.

On a second thought, it would probably add some overhead to figure it out on the client.

About the boiled down version, here's a short example

export const productStore = defineStore("products", {
    state: () =>  ({
        products: [
            {
                id: 1,
                name: '...',
                averageRating: 5,
                price: 2.50,
                images: [
                    { src: "...", alt: "...", title: "..." },
                    { src: "...", alt: "...", title: "..." },
                    { src: "...", alt: "...", title: "..." },
                ]
            }
        ],
    }),
    actions: {
        async fetch() {
            ...
        }
    }
})

A list of products is fetched, lets say 60 of them. A product has multiple images, variants, discounts, labels, price variations etc. Sometimes, the products themselves are part of a larger object. For example, there can be a Featured Products module, which contains pre-configured theming options and is coming from the database with the products attached to it.

I would like to be able to do something to the lines of

async fetch() {
  // .. fetch logic
  this.products = markRaw([...])
}

Note: I am aware that state management libraries are not created to specifically address the encapsulation of logic for fetching data, ie this would not be an issue if I was just fetching the products in the component, using a composable or something, but I'm hoping that you can spot the problem, despite the poor example

[posva]

I would say that right now, this is a shortcoming of the option based store and will require (as you mentioned) a better serialization/reviving strategy like the one being drafted at https://github.com/kiaking/vue-serialize-revive

However, I think it is possible to overcome this with the setup stores by using shallowRef() (and maybe a markRaw() would work too):

defineStore('id', () => {
  const products = shallowRef([])
})

The way hydration works in option and setup stores in very different and this shallowRef() call is kept while it wouldn't in an option store

[klausXR]

So, I finally got to try this out, unfortunately it doesn't work. shallowRef would have been the perfect fit, however, neither it or markRaw works.

I tested it on a brand new project with Nuxt 2 and the state always ends up reactive, no matter what I do.

Here's the boilerplate

// use-product-store.js

import { markRaw, shallowRef } from '@nuxtjs/composition-api'
import { defineStore } from 'pinia'

export const useProductStore = defineStore('products', () => {
  const products = shallowRef([])

  const setProducts = (v = []) => {
    // Mark raw should be an overkill, since shallowRef isnt recursive
    // but even with this it doesnt work
    products.value = markRaw(v.map(v => markRaw(v)))
  }

  return {
    products,
    setProducts
  }
})

export const products = [
  {
    id: 2833459,
    name: 'A product'
  }
]

// index.vue
<template>
  <div>
    <ul>
      <li v-for="product in products">{{product.name}}</li>
    </ul>
  </div>
</template>

<script>
import { useProductStore, products as data } from '~/use-product-store'

export default {
  name: 'IndexPage',
  async asyncData({ $pinia }) {
    const products = useProductStore($pinia)
    // pretend to set this as async data
    products.setProducts(data)
  },
  setup() {
    const productStore = useProductStore()

    return {
      products: productStore .products
    }
  }
}
</script>

If you select the index component from devtools and do $vm0.products and inspect it, you will see that the objects within the array have added reactive getters/setters.

This is causing major headaches for me, believe it or not, because the state is quite large. Even with lazy hydration, the app hydrates very slowly on the client.

If you have any other ideas, let me know

[Wewill]

Hello @klausXR,

This is causing major headaches for me, believe it or not, because the state is quite large. Even with lazy hydration, the app hydrates very slowly on the client.
If you have any other ideas, let me know

I faced the very same problem ; i need some reactive objects and some non-reactive objects in store.
I started looking like you ; around store and pinia, and finally found the way to make it.

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>

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