Make Vuex data reactive

Question

I'm looking for a solution to make my vuex data reactive.

Let me explain the context. I render a list from vuex data with

`computed: {
    ...mapGetters(["groups"])
},`

This list can be modified by the user with a drag and drop system. (I use https://github.com/Vivify-Ideas/vue-draggable FYI)

The problem is that data is not reactive. Usually I let the data in the data() vuejs propertie, so when a user modify the list, the data is reactively updated.

So is it possible to import the data from vuex to data() properties ? So:

1/ data from vuex is "imported" in data()

2/ data() is modified by user interactions

3/ data() is saved when necessary in vuex (in my const state = {}).

I didn't found my hapiness in my last search =(

You can't modify directly the Vuex store, you should follow the "Vuex" way of doing it, which is emit an action and then the action should mutate the state. Basically you need tho emit the action when vue-draggable changes something. — Eder Díaz
@LucasJ I can't reproduce the problem, any chance you can post the component code? — Richard Matsen
@EderChrono - because getters are used, it is not possible to update the store directly. I checked with Vue devtools, the local component binding is updated but the Vuex store value remains unaltered. — Richard Matsen
@RichardMatsen Yeah I guess it's not easy. Unfortunatly it's really hard to reproduce cause of the multiple composant used in the app :( — Lucas J

Jérôme Jérôme · Accepted Answer · 2018-11-30T16:51:49

You can try using the watch VueJS property

<template>
  // I never used this component, but I think (from the docs said) is used like this.
  <div v-drag-and-drop:options="myData">
    <ul>
      <li>Item 1</li>
      ...
    </ul>
    ...
  </div>
</template>
<script>
  ...
  data () {
    return {
      myData: null, // or whatever
    }
  },
  watch: {
    myData() {
      // if myData changed update the store.
      this.$store.commit('updateMyData', myData);
    }
  },
  created() {
    this.myData = this.$store.state.myStore.myStoreData;
  }
  ...
</script>

If the myData is updated then update the store, and if the store change, update your components data.

Your store should be looking like this

export default {
  mutations: {
    updateMyData(state, value) {
      state.myData = value;
    },
  },
  state: {
    myData: {} // or whatever
  },
};

Basically you need to update Vuex store when your component data change.

If you need more infos feel free to comment this answer.

Hope this help you.

Make Vuex data reactive

1 Answers