时间戳

首页 > 解决方案 > 根据用户操作访问 Vuex 状态

vue.js - 根据用户操作访问 Vuex 状态

问题描述

我正在使用 Nuxt.js 并且正在开发一个 Uploader 组件，我依赖于vue-upload-component 完整示例，基本上我删除了 Edit 功能并实现了 Vuex 进行状态管理，所以：

在数据（）

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 存储模块，其中包含有效的突变、操作和吸气剂，当用户选择文件时，存储会正确更新。

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>

标签： vue.jsvuex

解决方案

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

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>

推荐阅读