如何在 Vuex 中存储非反应性数据? [英] How to store non-reactive data in Vuex?

问题描述

我有数据，在 VueJS-application init 之前加载到页面上一次，并且此数据不会一直更改，而 html-page 不会重新加载(经典的 CGI 应用程序，而不是 SPA).数据示例:

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']
  }
}

我在一些 vue 组件中使用了这些数据.将此数据存储在 Vuex 命名空间模块中并使用 Vuex-getter 为不同的 vue 组件包装相同的功能会很方便.有什么方法可以不将这些数据存储在 vuex state 中(不需要反应性)，而是可以从 vuex-module 的 getter 中访问?

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. 目前我正在使用存储非反应性数据 inside vue-instance 方法，但现在还不够，我需要更多的全局访问数据(来自两个独立的根组件).

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).

推荐答案

在将对象添加到商店之前冻结它:

Freeze the object before adding it to the store:

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue 不会使冻结的对象具有反应性.

Vue won't make frozen objects reactive.

注意:你应该在它进入 Vuex 突变/动作之前冻结对象:

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

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

在变异函数中，payload-parameter 已经是反应性的.

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

这篇关于如何在 Vuex 中存储非反应性数据?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！