How to best integrate Vuex store with DataAdapter while keeping databinding

[shelkovnikovdv]

Hello, friends!
Before inventing a new bicycle, I would like to know your opinion.
We use Vue 2.x as the main engine and your library as the UI-interface.
The problem arose when we tried to connect Vuex store to the DataAdapter for the datasource grid and lost databinding 🙁
What, in your opinion, are the standard solutions?

[yavordashew]

Hi Дмитрий Шелковников,
In your situation in order to give you the best solution it will the best to share some of your code and review it.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[shelkovnikovdv]

Hello, friends. Made such an example with code.
1. We have a part in the Vuex storage where we store user data (store\modules\users.js )

const state = {
    all: []
};
const mutations = {
    SET_ALL(state, payload) {
        state.all = payload.data;
    }
}
const actions = {
    setItems(context, data) {
        return context.commit('SET_ALL', { data });
    }
}

2. We have a Vue list component where we only display and edit usernames. How the data source acts $store.state.users.all

export default {
    name: 'user-list',
    props: {
       value: {
           type: Array,
           default: () => $store.state.users.all
       }
  }
}

3. We have a Vue component with smart grid where you can view all information about users, add, change and delete.
For Smart.DataAdapter me also use $store.state.users.all

export default {
    name: 'user-grid',
    methods {
	getDataSource(data) {
            return new Smart.DataAdapter({
                dataSource: $store.state.users.all,
                keyDataField: 'id',
                dataFields: [
                   'id: number',
                   'name: string',
                   'nick: string',
                ]
            });
	}
   }
}

4. Now if something is changed in ‘user-list’ it will be reflected in ‘$store.state.users.all’, but ‘user-grid’ will not be automatically updated
Accordingly. If now if something is changed in ‘user-grid’ it will find not automatic reflection in ‘user-list’ and ‘$store.state.users.all’ in the Vuex store will not be updated either
This is our problem. But before rushing into battle, I would like to know if we are reinventing the wheel.

[shelkovnikovdv]

Hello, friends!
In addition
1) I see in the debugger how DataAdapter notifies about data changes in Smart-Grid through DataAdapter._notify
2) I don’t see how Smart-Grid notifies that it has changed the data in DataAdapter
Is there something I don’t understand or are there no such notifications?
Best regards, Dmitry.

[admin]

Hi Дмитрий Шелковников,
You can look at this example how to update data in the Grid dynamically: https://www.htmlelements.com/demos/grid/datagrid-update-data/. If you want to update the data set, you can create a new dataAdapter instance and set the Grid’s dataSource property to it. Alternatively, you can use the Grid API to make updates: https://www.htmlelements.com/demos/grid/live-update/
Best regards,
Peter Stoev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts