如何在Vuex中存储非活动数据？

Question

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

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

我在几个vue组件中使用这些数据.将这些数据存储在Vuex命名空间模块中并使用Vuex-getters为不同的vue组件包装相同的功能会很方便.有没有办法存储这些数据不在vuex内state(不需要反应)但能否从vuex-module的getter访问？

PS.目前我正在使用在vue-instance方法中存储非反应性数据,但现在还不够,我需要更多的全局数据访问(来自两个独立的根组件).

Answer 1

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

Object.freeze(nonReactiveObjectWithSomeNestedData )

Vue不会使冷冻物体反应.

注意:在进入Vuex变异/动作之前,您应该冻结对象:

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

在内部突变功能中,有效负载参数已经被反应.

Answer 2

还可以_isVue向对象添加属性以避免使其具有反应性。

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

当无法控制数据在存储中的存储方式时，此方法可用于使数据非反应性。例如，当存储数据完全替换客户端以“水合”服务器端呈现的网站（例如 Nuxt）时。

这是未记录的，将来可能会中断。至少源代码有一个注释，表明这个属性是在内部使用的。而这里是向财产前检查观察的对象。