JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › How to best integrate Vuex store with DataAdapter while keeping databinding › Reply To: How to best integrate Vuex store with DataAdapter while keeping databinding
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.