Vue-tables-2（vuex）反应性不起作用答案

【问题标题】：Vue-tables-2(vuex) reactivity not workingVue-tables-2（vuex）反应性不起作用
【发布时间】：2018-10-01 02:07:58
【问题描述】：

我有几个使用 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   
}

正如您在这张图片中看到的，该表有数据：

但是当路由改变时视图会刷新：

2018 年 2 月 5 日

现在我已经看到，如果我直接在组件中使用 Promise 修改状态，它会起作用：

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

有人知道为什么吗？ 谢谢

【问题讨论】：

可能是因为它需要某种“深度”跟踪。使用 vuex 查找该关键字。
试试useVuex=true 和Vue.use(VueTables.ClientTable, [options = {}], [useVuex = true], [theme = 'bulma'], [template = 'default']) 一样，我也测试了和你类似的代码，看起来工作正常..
“但是其中一个在我改变路线之前不会更新表格。”，你认为它应该改变以响应什么？点击一个按钮？呼吁采取行动？如果有，是哪一个？
正在调用一个动作 -> self.$nextTick(() => { self.$store.dispatch("vCard/getVCards"); });

标签： vue.js vuex vue-tables-2

【解决方案1】：

我上一个回答错了，我不记得我把表的vuex参数改成了false。我不知道为什么，但是推一下就可以了：

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

【讨论】：

【解决方案2】：

我也遇到过类似的问题。就像其他人已经提到的那样，这可能是一个反应性问题。您可以使用Vue.set() 来确保您的属性在设置状态值时是反应性的。

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

查看official documentation 了解此方法。

【讨论】：

【解决方案3】：

因为它是一个深层次的对象，你需要在你的变异中使用 Object.assign

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

【讨论】：

【解决方案4】：

这可能是一个反应性问题。（详细解释见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。）

改变你在你的突变中设置对象值的方式应该可以解决问题

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

基本上，这会创建一个新对象，以便 Vue 知道该对象已更新。在 Javasript 中，对象是通过引用传递的，这意味着 vCardTableData 不存储对象，它存储对对象的引用。您可以将其视为指向内存中对象的指针/地址。当您更改对象中的子属性时，引用保持不变，因此 Vue 不知道该对象已被更新。创建新对象可确保更新对象引用。

Mutations Follow Vue's Reactivity Rules 中也解释了这一点 在https://vuex.vuejs.org/en/mutations.html

【讨论】：