feeding row data to ag-grid vue component - vue.js

Question

In all the ag-grid-vue examples, data of rows are generated in the component's method of createRowData(), which is simple but not realistic.
I want to see an example in which row-data are provided to ag-grid vue component from the parent Vue instance.
If there's such information, please let me know.

Answer 1

I found a way by using Veux. Here's an example.
Appication.
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);
Component (modification to DynamicComponentExample.vue)
data () {
return {
gridOptions: null,
columnDefs: null
//rowData: null
}
},
computed: {
rowData(){
return this.$store.getters['rowData'];
}
},
beforeMount() {
...
//this.createRowData();
this.initColumnDefs();
},