为什么即使我尚未将vuex状态绑定到任何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组件看起来像这样

支持

<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(Supp.vue)使用v-model指令绑定到类型为checkbox的输入字段。

我要实现的目标：

当我切换复选框时，supps.logged应在true和之间切换，false但supplementStore.logged应保持不变（因为我尚未将其绑定到我的输入字段）。

我观察到的是Vue Devtools：

当我切换复选框时，两个supps.loggedANDsupplementStore.logged都在同步切换，即两个都在true和false之间同步切换，而我只想supps.logged切换。

谁能帮我？