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

Answer 1

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.