Vue.js中如何将Vuex获取的初始状态值存入变量且不随store更新

你遇到的同步更新问题，本质是JS引用类型的赋值特性 + Vuex响应式系统的工作机制共同导致的：

• 通过getter拿到的getSelectedLocation是Vuex store内部响应式状态的引用，和store内的源数据共享同一块内存地址
• 直接把该对象的local属性赋值给data的toggle时，如果local是对象、数组这类引用类型，data里的toggle不会生成独立副本，而是和store内的源数据保持引用关联——后续store内的对应值更新时，data里的toggle会同步跟着变化，根本无法留存初始值做对比。
• 哪怕你要存的是基本类型值，在组件初始化阶段做显式的快照留存，也能避免后续值类型变更带来的踩坑。

核心思路是：在组件初始化阶段，对getter拿到的目标值做完全独立的拷贝快照，彻底切断和Vuex响应式源数据的引用关联，让快照值不会随store的更新变化。

修正后的参考代码 #

data() {
  return {
    // 独立存储的初始值快照，和Vuex数据完全解耦
    initialLocation: {},
    toggle: false
  }
},
computed: {
  ...mapGetters({ 
    getUser: 'user/getUser', 
    getSelectedLocation: 'support/getSelectedLocation' 
  }),
},
created() {
  // 在组件最早的初始化节点，生成独立快照
  const currentLocation = this.getSelectedLocation
  // 对拿到的对象做深拷贝，完全脱离原响应式引用
  this.initialLocation = JSON.parse(JSON.stringify(currentLocation ?? {}))
  // 从快照中读取初始的toggle值，保证值是独立副本
  this.toggle = this.initialLocation?.local
},
methods: {
  async updateUsersLocation() {
    const usersCol = new UsersCollection(this.$fire.firestore)
    const id = this.getUser.id
    // 需要做初始值对比时，直接和存储的initialLocation对比即可
    const currentLocation = this.getSelectedLocation
    return await usersCol.updateUsersLocation({ 
      id, 
      location: currentLocation 
    })
  },
},

• 不要直接在data的return语句里做引用赋值：哪怕你写toggle: { ...this.getSelectedLocation.local }做浅拷贝，只要对象内部存在嵌套的引用类型属性，依然会和store源数据保持联动，必须根据对象结构做足够深度的拷贝
• 拷贝方式适配：
  • 简单、可被JSON序列化的普通对象：用JSON.parse(JSON.stringify(目标值))做快速深拷贝就足够用
  • 包含函数、循环引用的复杂对象：可以优先使用Vue内置的toRawAPI，直接把Vue的Proxy响应式代理对象转成原生JS对象，再按需做浅/深拷贝，性能更好且不会触发响应式追踪
• 快照生成时机要准确：必须在组件首次拿到目标getter值的最早节点生成，不要等后续的交互、watch触发时再生成，否则留存的就不是组件挂载阶段的初始值，而是中途已经变化后的中间值

内容的提问来源于stack exchange，提问作者ej001