在挂载的生命周期中保存 Vuex 状态答案

【问题标题】：Saving Vuex State on mounted lifecycle在挂载的生命周期中保存 Vuex 状态
【发布时间】：2018-08-28 22:31:58
【问题描述】：

我正在尝试将应用程序的根状态保存在 VueJS 的 mounted 生命周期中，并将副本冻结在 $root 的 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;

我的问题是，如何复制和冻结应用程序的初始状态并将其存储在单个 data 中？

【问题讨论】：

标签： javascript object vue.js vuex

【解决方案1】：

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

import {cloneDeep} from "lodash"

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

您的自定义选项可以使用 vm.$options 访问，并且不是响应式的

this.$options.myGlobalState

【讨论】：

感谢您的回答有效。编辑：它在data 对象中也停止反应了，我已经测试过了。
@KaungMyatLwin vuejs 为 data 选项中的属性设置 getter/setter 以使其具有反应性。如果您不想要反应性，您可以通过创建自定义选项来节省一些开销
是的，我非常清楚这一点。不知道我必须递归地克隆状态以使其不可变。

【解决方案2】：

您可以通过使用具有空设置器的计算值来做到这一点。

例如

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

【讨论】：

还是不行。如果store 发生突变，它仍会更新globalState。
那么你需要进行深度克隆。我使用 lodash，但还有其他选择
实际上，@Vamsi Krishna 的回答更好。但无论如何我都会把我的留在这里=]
当然，对于不在我的用例中的人来说，你的方法是另一种方式。