Reply To: How to best integrate Vuex store with DataAdapter while keeping databinding

[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.