如何从Vuex中存储的数组中编辑本地数组？

我正在尝试从Vuex提取数组，在本地对其进行编辑，然后：

1. 放弃更改而不更改Vuex阵列，或者
2. 提交本地更改（到后端）。

此时，编辑本地数组还可以更新Vuex中的数组-我不想这么做。

当我在表单上编辑数据并返回（不提交）时，所做的更改还将在Vuex中的数组上进行，而不仅仅是修改本地数组。

快速回顾一下我的代码：

商店：

 var app = new Vue({
        el: "#app",
        store: new Vuex.Store({
          state: {
            details: [ /* data */ ]
          }
        })
      });

HTML：

注意：在这里，我可以看到编辑前的默认值。

    <b-form>
     // I'm using the item and index later on
     <div v-for="(item, index) in data">
       // Just want to see what the default values are before editing
       <b-form-input v-model="form.title"></b-form-input>
     </div>
    </b-form>

脚本：

  data() {
    return {
      data: null,
      form: null
    }
  },
  beforeMount() {
    this.data = [...this.$store.state.details]
    this.form = this.data[0];
  }

如何改善我的代码，以便可以在本地进行更改？