基于用户操作的访问Vuex状态

Question

我正在使用Nuxt.js，我正在开发一个Uploader组件，我依赖于vue-上载-组件完整示例，基本上我删除了Edit功能，并实现了用于状态管理的Vuex，因此：

在data()中

files: this.$store.state.files.files,

在模板中

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

在方法中

inputUpdate(files) {
  this.$store.dispatch("files/setFiles", files)
},

每次添加文件时更新状态。

我有一个files.js存储模块，它可以工作的突变、操作和getter，并且当用户选择文件时，存储将被正确地更新。

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

我试图添加一个自定义编辑功能: 1)当用户选择具有适当编辑按钮的文件时，2)我将显示一些html输入，这些输入允许用户修改所选文件的某些字段

1)

<a :class="{'dropdown-item': true}" href="#" @click.prevent="onEdit(data.item)">Edit</a>

2)

methods:{
...
 onEdit(file){
      // file.id
    }
....

我想了解从存储中选择与用户选择的元素相对应的元素的最佳方法(比较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>

Answer 1

您应该使用计算而不是数据来保持反应性。

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>