Vuex 데이터를 사후 대응적으로 만들기

Vuex 데이터를 사후 대응적으로 만들기

나는 내 vuex 데이터를 반응적으로 만드는 솔루션을 찾고 있다.

그 맥락을 설명하겠다.Vuex 데이터에서 목록을 렌더링할 때

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

이 목록은 드래그 앤 드롭 시스템으로 사용자가 수정할 수 있다.(I use https://github.com/Vivify-Ideas/vue-draggable FYI)

문제는 데이터가 반응하지 않는다는 것이다.보통 나는 데이터() vuejs righttie에 데이터를 넣어 사용자가 목록을 수정하면 데이터가 반응적으로 업데이트된다.

그렇다면 vuex에서 data() 속성으로 데이터를 가져올 수 있는가?자:

1/ vuex의 데이터가 데이터에서 "잘못"임

2/ 데이터 사용자 상호 작용에 의해 수정됨

3/ 데이터 저장 vuex(내 항상 상태 = {})

지난번 검색에서 합을 찾지 못했다. =(

당신은 사용 할 수 있다.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 저장소를 업데이트하십시오.

만약 당신이 더 많은 정보가 필요하다면 이 대답에 대해 자유롭게 논평하시오.

이것이 너에게 도움이 되기를 바라.

참조URL: https://stackoverflow.com/questions/53561430/make-vuex-data-reactive