Question

我正在尝试在VueJS的mounted生命周期中保存应用程序的根状态，并冻结$root的{{1}}中的副本，我的尝试如下，

data

然而，这种方法正在更新mounted() { this.globalState = this.$store.state; }, data () { return { globalState: null } }，所以我想出了另一种方法来使用globalState来冻结它，但没有运气，它会不断更新。

此外，我还尝试将Object.freeze()复制到this.$store.state变量并通过它更新const，但它也失败了。

我的最后一次尝试如下，我知道这是一个丑陋的代码，但请耐心等待。

globalState

我的问题是，如何复制和冻结应用程序的初始状态并将其存储在单个let emptyObj = {}; Object.defineProperty(emptyObj, 'globalState',{ value: this.$store.state, enumerable: false, configurable: false, writable: false } ); this.globalState = emptyObj.globalState;中？

Answer 1

您可以使用具有空设置器的计算值来执行此操作。

e.g。

import _ from 'lodash';

{
  data() { return {} },
  computed: {
    globalState: {
      get() {
        return _.cloneDeep(this.$store.state);
      },
      set(input) {}
    }
  },
  mounted(){
    this.globalState = {test2:456};
    // this won't change anything
  }
}

https://codepen.io/jacobgoh101/pen/bvgMRR?editors=1111

Answer 2

由于您不希望在状态对象的副本上具有反应性，因此最好在组件选项中创建自定义选项，而不是冻结data选项中的对象。

import {cloneDeep} from "lodash"

export default{
    myGlobalState: null,
    mounted() {
        this.$options.myGlobalState = cloneDeep(this.$store.state);
    }
}

您的自定义选项可以使用vm.$options加入，而不是被动

this.$options.myGlobalState

在已安装的生命周期中保存Vuex状态

2 个答案: