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 это будет сделать проще и быстрее, о читаемости кода я вообще промолчу.

 

Github: https://github.com/ikenfin/vuex-models

NPM: https://www.npmjs.com/package/vuex-models