VueJS挂载周期保存Vuex根状态并冻结副本问题求助

Hey there! I get exactly what you're trying to do—save a static snapshot of your Vuex root state when the component mounts, so it doesn't update when the actual store state changes. Let's break down why your current approaches aren't working, then walk through solid solutions.

Why Your Current Methods Fail #

First, let's clarify the core issue: Vuex's state is a reference-type object. When you do things like:

this.globalState = this.$store.state;

or even assign it to a const first, you're just copying the memory reference to the state object—not creating a separate copy. So when the original state updates, your globalState points to the same object and reflects those changes automatically.

As for Object.freeze(): it only freezes the top-level properties of an object. If your state has nested objects (which most do), those nested objects are still mutable. Plus, freezing the actual Vuex state directly can mess with Vue's reactivity system, so that's not a good approach anyway.

Solutions to Create a Static Snapshot #

To fix this, you need to create a deep copy of the Vuex state—this creates an entirely separate object that doesn't share references with the original state. Here are a few reliable ways to do this:

1. Quick & Simple: JSON Serialization (For Basic State Structures)

If your state doesn't contain functions, Symbol values, or circular references, this method works great:

mounted() {
  // Create a deep copy by serializing and deserializing the state
  this.globalState = JSON.parse(JSON.stringify(this.$store.state));
},
data() {
  return {
    globalState: null
  };
}

This converts the state to a JSON string (which strips out non-serializable values) then parses it back into a new object—completely disconnected from the original state.

2. Robust: Use Lodash's cloneDeep (For Complex State)

If your state has nested objects, functions, or other non-serializable data, use Lodash's dedicated deep copy function. First install Lodash if you haven't:

npm install lodash

Then use it in your component:

import cloneDeep from 'lodash/cloneDeep';

export default {
  mounted() {
    this.globalState = cloneDeep(this.$store.state);
  },
  data() {
    return {
      globalState: null
    };
  }
};

cloneDeep handles all kinds of data types and nested structures safely, so it's the go-to for complex state setups.

3. DIY: Custom Recursive Deep Copy (No Third-Party Libraries)

If you don't want to add Lodash to your project, you can write your own recursive function to deep copy the state:

function deepCopy(obj) {
  // Return primitive values directly
  if (obj === null || typeof obj !== 'object') return obj;
  
  // Handle Date objects
  if (obj instanceof Date) return new Date(obj.getTime());
  
  // Handle arrays
  if (obj instanceof Array) return obj.map(item => deepCopy(item));
  
  // Handle plain objects
  const copiedObj = {};
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      copiedObj[key] = deepCopy(obj[key]);
    }
  }
  return copiedObj;
}

export default {
  mounted() {
    this.globalState = deepCopy(this.$store.state);
  },
  data() {
    return {
      globalState: null
    };
  }
};

This function recursively copies every level of the object, ensuring no shared references with the original state.

Final Notes #

Once you use one of these deep copy methods, your globalState will be a static snapshot of the Vuex state at the time the component mounted. It won't update when the original store state changes, which is exactly what you're looking for!

内容的提问来源于stack exchange，提问作者Kaung Myat Lwin