javascript - 为什么即使我没有将 vuex 状态绑定(bind)到任何 html 输入元素，我的 vuex 状态也会在更改组件级别状态时发生变化？

Question

我有一个 vue 商店，其中包含以下内容

store.js

import Vue from 'vue'
import Vuex from 'vuex'

const state = {
      supplementStore: {}
    }

const actions = {
  getDataFromApi ({dispatch, commit}) {
    APIrunning.then(response => {
      commit('SET_SUPPLEMENT', response)
    })
  }
}

const mutations = {
  SET_SUPPLEMENT (state, data) {
    state.supplementStore= data
  }
}

const foodstore = {
  namespaced: true,
  state,
  actions,
  mutations
}

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    foodstore
  }
})

我的 vue 组件如下所示

Supp.vue

<template>
    <input type="checkbox" v-model="supps.logged">
</template>

<script>
import {mapState, mapActions} from 'vuex'
import store from './store'

export default {
  data () {
    return {
      supps: []
    }
  },
  mounted () {
    this.supps = this.supplementStore
  },
  computed: {
    ...mapState('foodstore', ['supplementStore'])
  }
}
</script>

如您所见，我有一个名为 supps 的组件级状态其赋值为 supplementStore (这是一个vuex状态)一旦是mounted .

mounted () {
  this.supps = this.supplementStore
},

supplementStore从 API 获取其值，它是一个 JSON 对象，如下所示

supplementStore = {
  logged: true
}

因此，当我的 Supp.vue组件已安装在我的本地状态 supps将成为

supps = {
    logged: true
  }

supps绑定(bind)到类型为复选框 (Supp.vue) 的输入字段使用v-model指令。

What I want to achieve:

当我切换复选框时，supps.logged应在 true 之间切换和false但是，supplementStore.logged应该保持不变(因为我没有将它绑定(bind)到我的输入字段)。

What I observe in my Vue Devtools:

当我切换复选框时，supps.logged和 supplementStore.logged正在同步切换，即它们都在 true 和 false 之间同步切换，而我只想要 supps.logged进行切换。

有人可以帮助我吗？

Answer 1

在 Javascript 中，对象是通过引用传递的。 (这是一个相当好的解释=> https://medium.com/nodesimplified/javascript-pass-by-value-and-pass-by-reference-in-javascript-fcf10305aa9c)

要避免此问题，您可以在分配给 supps 时克隆该对象。

mounted () {
  this.supps = { ...this.supplementStore } // cloning the object using Javascript Spread syntax
},