What is the best method for saving inert data in Vuex?

Question

What is the best method for saving inert data in Vuex?

Once the VueJS application is initialized, I have certain data loaded on the page that will remain static until the HTML page is reloaded. This data is in the form of a nonReactiveObjectWithSomeNestedData example:

const nonReactiveObjectWithSomeNestedData = { 
  a: 'a',
  b: {
    bb: 'bb',
    cc: { ccc: 'ccc' },
    dd: ['dd1', 'dd2']
  }
}

This data is used in multiple Vue components and it would be convenient to store it in a Vuex namespaced module and utilize Vuex getters to wrap the same functionality for different components. Is there a way to store this data outside of the Vuex state (without reactivity) but still be able to access it from a Vuex module's getter?

PS. Currently, I am storing non-reactive data inside a Vue instance method. However, I now require more global access to the data from two independent root components.

javascript vue.js vuejs2 vuex

Answer 1

Answer №1

Make sure to freeze the object first before adding it to the store:

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue does not add reactivity to frozen objects.

Please remember: Freeze the object before passing it to a Vuex mutation/action:

this.$store.dispatch('moduleName/setNonReactiveObject', 
    Object.freeze(nonReactiveObjectWithSomeNestedData));

Within the mutation function, the payload parameter will already be reactive.

Answer 2

Make sure to freeze the object first before adding it to the store:

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue does not add reactivity to frozen objects.

Please remember: Freeze the object before passing it to a Vuex mutation/action:

this.$store.dispatch('moduleName/setNonReactiveObject', 
    Object.freeze(nonReactiveObjectWithSomeNestedData));

Within the mutation function, the payload parameter will already be reactive.

Answer 3

Answer №2

Another way to prevent an object from becoming reactive is by adding a property _isVue to it.

commit('setNonReactiveObject', Object.assign(data, { _isVue: true })

This method can come in handy when you need to maintain non-reactive data, especially in situations where you don't have control over how data is stored in the store. For instance, when replacing all store data on the client-side to match a server-side rendered website (e.g. Nuxt).

Although not officially documented, this approach may not work in the future. The source code has comments suggesting that this property is used internally for this purpose. Furthermore, the property is checked before object observation takes place.

Answer 4

Another way to prevent an object from becoming reactive is by adding a property _isVue to it.

commit('setNonReactiveObject', Object.assign(data, { _isVue: true })

This method can come in handy when you need to maintain non-reactive data, especially in situations where you don't have control over how data is stored in the store. For instance, when replacing all store data on the client-side to match a server-side rendered website (e.g. Nuxt).

Although not officially documented, this approach may not work in the future. The source code has comments suggesting that this property is used internally for this purpose. Furthermore, the property is checked before object observation takes place.

Answer 5

Answer №3

To eliminate the reactivity, I utilized the following approach:

// A new variable is created to eliminate reactivity, by performing a deep clone
var nonReactiveClone = JSON.parse(JSON.stringify(originalReactiveVariable));

Answer 6

To eliminate the reactivity, I utilized the following approach:

// A new variable is created to eliminate reactivity, by performing a deep clone
var nonReactiveClone = JSON.parse(JSON.stringify(originalReactiveVariable));

Answer 7

Answer №4

When working with mutation files, remember to deep clone the payload for non-reactive properties.

import _ from 'lodash';

    [mutationTypes.SET_INITIAL_STATE](state, payload) {
    // To ensure non-reactivity, deep clone the property
    state.initialState = _.cloneDeep(payload)
}

By following this approach, the added property in the state will remain non-reactive.

Answer 8

When working with mutation files, remember to deep clone the payload for non-reactive properties.

import _ from 'lodash';

    [mutationTypes.SET_INITIAL_STATE](state, payload) {
    // To ensure non-reactivity, deep clone the property
    state.initialState = _.cloneDeep(payload)
}

By following this approach, the added property in the state will remain non-reactive.

What is the best method for saving inert data in Vuex?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Dropping anchor whilst skipping or jumping

Transferring data from JavaScript to ASP.NET (via AJAX)

How to Load JSON Data Using D3 When Column Definitions are Separated

How can I change the background image using CSS instead of HTML?

Validate if the translation file exists in ngx-translate

Vue's unshift method only appends new items to the beginning of an

Trimming Picture on User's Device

Error Message for Sequelize Validation Fails to Appear as Expected

How come the mouseover effect on the div remains even after the mouse has been removed?

Tips on skipping the need to repeatedly use `@ApiProperty()` for every dto in NestJs-swagger

What could be the reason for the absence of an option in the navbar

Repeated information displayed in modal pop-ups

Modifying a JavaScript code with document.write(variable)

Reloading a page in Vue-Router after submitting a form

Preserve final variable state - Angular

What is the reason for the lack of arguments being passed to this Express middleware function?

Converting Strings to Booleans in Vue: A Dilemma

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

JQuery receives an enchanting response from the magic line

Issue with emitting events from child to parent component