How to store non-reactive data in Vuex?

Question

I have data, that loaded on page once before VueJS-application init, and this data will not change for all time while html-page will not reload (classic CGI application, not SPA). Data example:

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

I am using this data in a few vue-components. It would be handy to store this data in Vuex namespaced module and to use Vuex-getters for wrapping same functionality for different vue-components. Is there any way to store this data not inside vuex state (reactivity not needed) but with ability to access from vuex-module's getter?

PS. Currently I am using storing non-reactive data inside vue-instance method, but now it is not enough, I need more global access to data (from two independent root-components).

hedin · Accepted Answer · 2017-11-23 12:55:17Z

32

Freeze the object before adding it to the store:

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue won't make frozen objects reactive.

Note: you should freeze object before it comes into Vuex mutation/action:

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

Inside mutation function the payload-parameter will be already reactive.

edited Nov 23, 2017 at 12:55

hedin

1,02410 silver badges18 bronze badges

answered Nov 23, 2017 at 10:07

Linus Borg

24.1k7 gold badges65 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Pier Over a year ago

And what if we need to change that object later but still don't want the reactivity?

Linus Borg Over a year ago

1. make a copy const copy = { ..original }, 2. change that copy, 3. freeze the copy, 4. replace original in store with the copy.

bgraves Over a year ago

Right now I'm using vuex 3.0.1 and the payload-parameter is not "already reactive" inside action and mutation functions (but afterwards of course).

njam · Accepted Answer · 2019-05-11 14:10:09Z

6

One can also add a property _isVue to the object to avoid making it reactive.

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

This approach can be useful to make data non-reactive when there's no way to control how the data is stored in the store. For example when store data is completely replaced client-side to "hydrate" a server-side rendered website (e.g. Nuxt).

This is undocumented and might break in the future. At least the source code has a comment indicating that this property is used for this internally. And here is where the property is checked before observing the object.

answered May 11, 2019 at 14:10

njam

1,38315 silver badges16 bronze badges

Comments

ScottyG · Accepted Answer · 2019-08-26 21:42:35Z

1

I was able to remove the "reactiveness" by doing something like this

// create new variable and remove reactiveness, does a deep clone
var someNewNonReactiveVar = JSON.parse(JSON.stringify(someReactiveVar));

answered Aug 26, 2019 at 21:42

ScottyG

3,4503 gold badges35 silver badges44 bronze badges

Comments

Ion Scorobogaci · Accepted Answer · 2020-11-11 07:25:34Z

0

In mutation file you can deep clone the payload that you don't want to be reactive

import _ from 'lodash';

    [mutationTypes.SET_INITIAL_STATE](state, payload) {
    // In order to make sure that this property is non-reactive deep clone it
    state.initialState = _.cloneDeep(payload)
}

This way the initialState or whatever property you're adding to the state, won't be reactive.

answered Nov 11, 2020 at 7:25

Ion Scorobogaci

1652 silver badges5 bronze badges

Collectives™ on Stack Overflow

How to store non-reactive data in Vuex?

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related