Vue.js 基于用户操作访问Vuex状态

我正在使用Nuxt.js，我正在开发一个Uploader组件，我依赖它，基本上我删除了编辑功能，并实现了用于状态管理的Vuex，因此：

在数据中（）

在模板中

<file-upload
  ... others ...
  @input-filter="inputFilter"
  @input-file="inputFile"
  @input="inputUpdate"
  ref="upload">

每次添加文件时更新状态

我有一个files.js存储模块，其中包含变异、操作和getter，可以正常工作，当用户选择文件时，存储会正确更新

export const state = () => ({
  files: []
})

我正在尝试添加自定义编辑功能： 1） 当用户使用适当的编辑按钮选择文件时， 2） 我将显示一些html输入，允许用户修改所选文件的某些字段

(一)

我想了解从存储中选择与用户选择的元素对应的元素（比较id）的最佳方式。 我想利用v-for，然后依靠v-show只显示用户选择的内容，但我当前的实现不起作用

 <b-card
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5">
 </b-card>

---

您应该使用计算数据来保持反应性

computed: {
  files () {
    return store.state.files.files
  }
}

要从存储中选择文件，有很多方法可以实现

data: {
   selectedFile: {}
},
methods:{
   onEdit(file){
     this.selectedFile = file;
   },
   cancelEdit(){
     this.selectedFile = {};
   }
   ...
}

不要用

v-for

隐藏东西

<b-card
  v-if="selectedFile.id"
  :title="selectedFile.name"
  :sub-title="selectedFile.size"
  class="my-5 selected-file">
</b-card>
<b-card
  v-else
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5 files">
</b-card>

 <b-card
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5">
 </b-card>

computed: {
  files () {
    return store.state.files.files
  }
}

data: {
   selectedFile: {}
},
methods:{
   onEdit(file){
     this.selectedFile = file;
   },
   cancelEdit(){
     this.selectedFile = {};
   }
   ...
}

<b-card
  v-if="selectedFile.id"
  :title="selectedFile.name"
  :sub-title="selectedFile.size"
  class="my-5 selected-file">
</b-card>
<b-card
  v-else
  v-for="(file, id) in files"
  :key="id"
  :title="file.name"
  :sub-title="file.size"
  class="my-5 files">
</b-card>