Сделайте данные Vuex реактивными

Question

Я ищу решение, чтобы сделать мои данные vuex реактивными.

Позвольте мне объяснить контекст.Я отображаю список из данных vuex с помощью

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

Этот список может быть изменен пользователем с помощью системы перетаскивания.(Я использую https://github.com/Vivify-Ideas/vue-draggable FYI)

Проблема в том, что данные не реагируют.Обычно я передаю данные в data () как свойства vuejs, поэтому, когда пользователь изменяет список, данные обновляются реактивно.

Так можно ли импортировать данные из vuex в свойства data ()?Итак:

1 / данные из vuex «импортируются» в data ()

2 / data () изменяется при взаимодействии с пользователем

3 / data () сохраняетсякогда необходимо в vuex (в моем постоянном состоянии = {}).

Я не нашел своего счастья в моем последнем поиске = (

Answer 1

Вы можете попробовать использовать свойство watch VueJS

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

Если обновлено myData, обновите хранилище, а если хранилище измените, обновите данные ваших компонентов.

Ваш магазин должен выглядеть следующим образом

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

По сути, вам нужно обновить Vuex store при изменении данных вашего компонента.

Если вам нужно больше информации, не стесняйтесь комментировать этот ответ.

Надеюсь, это поможет вам.