将行数据提供给 ag-grid vue 组件答案

【问题标题】：feeding row data to ag-grid vue component将行数据提供给 ag-grid vue 组件
【发布时间】：2018-06-12 14:38:18
【问题描述】：

在所有的 ag-grid-vue 示例中，行的数据都是在组件的 createRowData() 方法中生成的，这很简单但不现实。

我想看一个例子，其中行数据从父 Vue 实例提供给 ag-grid vue 组件。

如果有这样的信息，请告诉我。

【问题讨论】：

标签： vue.js ag-grid

【解决方案1】：

我找到了使用 Veux 的方法。这是一个例子。

应用。

let gridRows = {
  state: {
    rowData: []
  },
  mutations: {
    push(state, rows) {
      while( 0 < rows.length ){
        state.rowData.unshift(rows.pop());
      }
    },
  getters: {
    rowData: state => {
      let rows = state.rowData;
      return state.rowData;
    }
  }
};
let store = new Vuex.Store(gridRows);
let app01 = new Vue({
  el: '#app',
  store,
  render: h => h(DynamicComponentExample)
});

let rowData = [];
for (var i=0; i < 15; i++) {
  rowData.unshift({
    row: "Row " + i,
    value: i,
    currency: i + Number(Math.random().toFixed(2))
  });
}

store.commit('push', rowData);

组件（修改为 DynamicComponentExample.vue）

  data () {
    return {
      gridOptions: null,
      columnDefs: null
      //rowData: null
    }
  },
  computed: {
    rowData(){
      return this.$store.getters['rowData'];
    }
  },
  beforeMount() {
    ...
    //this.createRowData();
    this.initColumnDefs();
  },

【讨论】：