Vue-tables-2(vuex) 반응성이 작동하지 않음

Vue-tables-2(vuex) 반응성이 작동하지 않음

나는 vue-tables-2를 사용하는 여러 구성 요소를 가지고 있지만, 그 중 하나는 경로를 변경할 때까지 테이블을 업데이트하지 않는다.

구성 요소

    <template>
//..
    <div class="table-responsive" >
       <v-client-table ref="table" name="vCardTable" 
          :data="vCardTableData.data" 
          :columns="vCardTableData.headers" 
          :options="vCardTableData.options"/>
    </div> 
//..
    </template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";

export default {
  name: "VCard",
  computed: {
    ...mapState("commons", ["user"]),
    ...mapGetters({ vCardTableData: "vCard/vCardTableData" })
  },
  mounted() {
    var self = this;
    self.$nextTick(() => {
      self.$store.dispatch("vCard/getVCards"); <-- GET TABLE DATA
    });
  }
};
</script>

저장하다

const state = {
    vCardTableData: {
        data: [],
        headers: [
           //..
        ],
        options: {
            filterable: false,
            preserveState: false,
            headings: {
                //..
            },
            texts: {
                //..
            },
            pagination: {
                dropdown: true,
            },
            templates: {
                //..
            },
        },
    }
}

const getters = {
    vCardTableData: state => state.vCardTableData
}

const actions = {
    getVCards({commit, dispatch}) {
            return api.request("get", "getvcards").then(response => {
                setTimeout(() => {  
                    commit("setVCardTableData", response.data.vcards);
                }, 300);
            }).catch(error => {
                console.log(error);
            });
    }
}

const mutations = {
    clearTableData: (state) => {
        if (state.vCardTableData.data) {
            state.vCardTableData.data = [];
        }
    },
    setVCardTableData : (state, vCardTableData) => state.vCardTableData.data = vCardTableData   
}

이 이미지에서 볼 수 있듯이 표에는 다음과 같은 데이터가 있다.

그러나 경로가 변경되면 보기가 새로 고쳐진다.

02/05/2018

자, 이제 나는 만약 내가 약속을 가지고 구성 요소에서 직접 주를 수정한다면 그것이 효과가 있다는 것을 보았다.

this.$store.dispatch("vCard/getVCards", []).then((responseData)=>{
       this.$store.state.vCard.vCardTableData.data = responseData;
  }); 

왜 그런지 아는 사람 있어?감사합니다.

나의 마지막 대답이 틀렸다, 나는 내가 그 대답을 바꾼 것을 기억하지 못했다.vuex표의 매개변수를 거짓으로 표시한다.나는 왜 그런지 모르지만 밀고 나가는 것이 효과가 있다.

setVCardTableData : (state, vCardTableData) => {
    vCardTableData.forEach(tableData => {
            state.vCardTableData.data.push(tableData);   
    });
} 

이것은 아마도 반응성 문제일 것이다.(자세한 설명은 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats을 참조하십시오.)

돌연변이의 개체 값을 설정하는 방법을 이렇게 변경하면 문제가 해결된다.

setVCardTableData: (state, vCardTableData) => state.vCardTableData = {
    ...state.vCardTableData,
    data: vCardTableData
}

기본적으로 이것은 Vue가 개체가 업데이트되었음을 알 수 있도록 새로운 개체를 생성한다.자바스크립트에서 객체는 참조로 전달되며, 이는 다음을 의미한다.vCardTableData객체를 저장하지 않고 객체에 대한 참조를 저장한다.메모리에 있는 개체를 가리키는 포인터/주소라고 생각할 수 있다.개체에서 하위 속성을 변경해도 참조는 변경되지 않으므로 Vue는 개체가 업데이트된 것을 알지 못한다.새 개체를 생성하면 개체 참조가 업데이트되는지 확인하십시오.

이는 https://vuex.vuejs.org/en/mutations.html의 "Vue의 반응도 규칙에 따른 돌연변이"에서도 설명된다.

깊은 물체니까 Object.assign을 사용해서 변이를 해야 해.

setVCardTableData: (state, vCardTableData) => Object.assign(state.vCardTableData.data, vCardTableData)

나도 비슷한 문제가 있었어.다른 사람들이 이미 언급했듯이 그것은 아마도 반응성 문제일 것이다.사용할 수 있다Vue.set()상태 값을 설정할 때 속성이 반응하는지 확인하십시오.

setVCardTableData: (state, vCardTableData) => {
    Vue.set(state.vCardTableData, 'data', vCardTableData);
}

이 방법에 대한 공식 문서를 확인하십시오.

참조URL: https://stackoverflow.com/questions/49940249/vue-tables-2vuex-reactivity-not-working