Vuex-models
Небольшая библиотека для удобной генерации и маппинга реактивных свойств в Vuex Store
На сайте есть подробный разбор Vuex-models, в двух словах, эта библиотека позволяет серьёзно упростить работу с реактивными свойствами Vuex и маппингом их в Vue-компоненты для использования с v-model.
Т.е. раньше нужно было писать такой код:
// store.js:
export default new Vuex.Store({
strict: true,
state: {
vmodelCompatible: ''
},
mutations: {
SET_VMODEL_COMPATIBLE_VALUE (state, value) {
state.vmodelCompatible = value
}
},
actions: {
setVmodelCompatible ({commit}, value) {
commit('SET_VMODEL_COMPATIBLE_VALUE', value)
}
},
getters: {
vmodelCompatible (state) {
return state.vmodelCompatible
}
}
})
//vue компонент:
export default {
computed: {
myVmodel: {
get () {
return this.$store.getters.vmodelCompatible
},
set (newValue) {
this.$store.dispatch('setVmodelCompatible', newValue)
}
}
}
}
и лишь после написания всей этой рутины можно безопасно использовать свойство myVmodel в режиме two-way-databinding:
<input v-model="myVmodel" />
Не знаю, как вам, а мне после описания 8-10 таких полей стало абсолютно понятно — такой фигнёй я заниматься не собираюсь
В результате, разработал небольшую библиотеку из двух функций — наконец можно забыть об этой истязательной рутине и написать тот код так:
// store.js
import { genVuexModels } from 'vuex-models'
export default new Vuex.Store({
strict: true,
...genVuexModels({
vmodelCompatible: ''
})
})
// vue компонент:
import { mapVuexModels } from 'vuex-models'
export default {
computed: {
...mapVuexModels(['vmodelCompatible'])
}
}
ВСЁ!
Мы избавились от рутины и повторяющегося кода!
Показанный выше пример, это самый элементарный способ использования (надо ж мне было как-то вас впечатлить) — на деле я рекомендую все наборы моделей располагать в vuex модулях — на мой взгляд такой подход сильно улучшит читаемость вашего проекта.
Разница будет куда заметнее, если вы добавите в проект, скажем, ещё 10-15 полей — с vuex-models это будет сделать проще и быстрее, о читаемости кода я вообще промолчу.