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

Question

我正在尝试在 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 中？

Answer 1

您可以使用空 setter.

的计算值来做到这一点

例如

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 状态

Saving Vuex State on mounted lifecycle

javascript

object

vue.js

vuex