How to commit received data to Vue store?

Question

I'm trying to:

get element's data @click using getDetails method and put it into fileProperties: []
and then send that data to store using fileDetails computed property

This worked for my other components which have v-model and simple true/false state, but I'm not sure how to send the created by the method array of data to the store properly.

In other words, how do I make this computed property to get the data from fileProperties: [] and commit it to store? The fileDetails computed property below is not committing anything.

Code:

  [...]

  <div @click="getDetails(file)"></div>

  [...]


<script>
  export default {
    name: 'files',
    data () {
      return {
        fileProperties: []
      }
    },
    props: {
      file: Object
    },
    methods: {
      getDetails (value) {
        this.fileProperties = [{"extension": path.extname(value.path)}, 
                              {"size": this.$options.filters.prettySize(value.stat.size)}]
      }
    },
    computed: {
      isFile () {
        return this.file.stat.isFile()
      },
      fileDetails: {
        get () {
          return this.$store.state.Settings.fileDetails
        },
        set (value) {
          this.$store.commit('loadFileDetails', this.fileProperties)
        }     
      }
    }
  }
</script>

store module:

const state = {
    fileDetails: []
}

const mutations = {
    loadFileDetails (state, fileDetails) {
        state.fileDetails = fileDetails
    }
}

Example on codepen:

https://codepen.io/anon/pen/qxjdNo?editors=1011

In this codepen example, how can I send over the dummy data [ { "1": 1 }, { "2": 2 } ] to the store on button click?

tony19 · Accepted Answer · 2022-07-15 21:02:04Z

5

You are never setting the value for fileDetails, so the set method of the computed property is never getting called. Here's the documentation on computed setters.

If the fileProperties data is really just the same as the fileDetails data, then get rid of it and set fileDetails directly in your getDetails method.

Here's a working example:

const store = new Vuex.Store({
  state: {
    fileDetails: null
  },
  mutations: {
    loadFileDetails (state, fileDetails) {
      state.fileDetails = fileDetails
    }
  }
})

new Vue({
  el: '#app',
  store,
  data() {
    return {
      fileProperties: null
    }
  },
  methods: {
    getDetails (value) {
      this.fileDetails = [{"1": 1}, {"2": 2}]
    }
  },
  computed: {
    fileDetails: {
      get () {
        return this.$store.state.fileDetails
      },
      set (value) {
        this.$store.commit('loadFileDetails', value)
      }     
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <h1>element data:</h1>
  {{fileDetails}}

  <hr>

  <h1>store data:</h1>
  <p>(should display the same data on button click)</p>
  {{fileDetails}}

  <hr>

  <button @click="getDetails">btn</button>
</div>

edited Jul 15, 2022 at 21:02

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 12, 2018 at 15:51

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Un1 Over a year ago

That's perfect! Thank you very much for the explanation and the working example! People like you make stackoverflow a great place for newbies to learn, thank you for that!

Collectives™ on Stack Overflow

How to commit received data to Vue store?

Code:

store module:

Example on codepen:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code:

store module:

Example on codepen:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related