Access Vuex state based on user action

Question

I'm working with Nuxt.js and I'm developing an Uploader component, I relied on vue-upload-component full example and basically I removed the Edit functionality and implement Vuex for state management, so:

in data()

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

in template

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

in methods

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

to update the state every time a file is added.

I've a files.js store module whit mutations, actions and getters that worked and when a user select files, the store is updated correctly.

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

I'm trying to add a custom edit functionality: 1) when a user select a file with proper edit button, 2) I would show some html inputs that allow user to modify some fields of the selected file

1)

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

2)

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

I would like to understand which is the best way to select from the store the element corresponding to the one selected by the user (comparing the id). I thought to take advantage of v-for and then lean on v-show to show only what the user selected, but my current implementation not work.

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

Tobino Tobino · Accepted Answer · 2018-05-05T08:57:07

You should use computed not data to keep reactivity.

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

To select a file from store there is many way to achieve it.

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

don't use v-for to hide thing

<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>

Access Vuex state based on user action

1 Answers