使 Vuex 数据具有反应性

Question

我正在寻找一种解决方案来使我的 vuex 数据具有反应性。

让我解释一下上下文。我用 vuex 数据渲染一个列表

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

用户可以使用拖放系统修改此列表。（我使用https://github.com/Vivify-Ideas/vue-draggable仅供参考）

问题是数据不是反应性的。通常我让 data() vuejs 属性中的数据，所以当用户修改列表时，数据会被动更新。

那么是否可以将数据从 vuex 导入到 data() 属性中？所以：

1/ 来自 vuex 的数据在 data() 中“导入”

2/ data() 被用户交互修改

3/ data() 在需要时保存在 vuex 中（在我的 const 状态 = {}）。

我在上次搜索中没有找到我的快乐 =(

Answer 1

您可以尝试使用watchVueJS 属性

<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 存储。

如果您需要更多信息，请随时评论此答案。

希望这对你有帮助。