Как применять реактивность при использовании Vuex?

Question

[Михаил]

Перерабатываем приложение, переводим его на Vue.js. После разбивки на однофайловые компоненты начали использовать Vuex и возник вопрос - вся прелесть Vue для меня в реактивности данных.
Но Vuex требует использования мутаций, а не прямого изменения данных в Vuex. Как быть?

Пример - в компоненте есть поле chekbox как сделать чтобы данные в него выводились из Vuex и менялись в Vuex? Т.е. была реактивность?

Сделал так - в компоненте вел переменную tmp которая при инициализации в data() получает значение из Vuex объекта state и связывается с chekbox'ом через v-model.
А при событии изменения вызывается метод который изменяет объект Vuex в зависимости от состояния этой временной переменной.

<input type="checkbox" change ="changePrintTwoActs" v-model="tmpActsPrintPages">

data() {
            return {                
                tmpActsPrintPages: this.$store.state.app.actsPrintPages==2 ? true : false
            }
        },
        methods: {
            changePrintTwoActs : function () {
                this.$store.state.app.actsPrintPages = this.tmpActsPrintPages ? 2 : 1;
....

Мне кажется, что это костыль. Как более правильно пользоваться реактивностью Vue при использовании Vuex?

Answer 1

[0xD34F]

Сделайте computed свойство, у которого геттер возвращает значение из vuex, а сеттер - дёргает мутацию:

сomputed: {
  checked: {
    get() {
      return this.$store.state.checked
    },
    set(val) {
      this.$store.commit('updateChecked', val)
    }
  }
}

https://jsfiddle.net/4nkh119u/

Comments

[Михаил]

Спасибо! В итоге так и сделал, все прекрасно работает!

[Evgenii Borovoi]

0xD34F А подскажите, с объектом должно также работать?
У меня в хранилище user это объект и я работаю с его свойствами. На вывод из computed свойства работает нормально, когда радиокнопку нажимаю - ругается: "do not mutate vuex store state outside mutation handlers"

Просто не хочется отказываться от v-model и обрабатывать отдельно change.

set(user) {
this.$store.commit('setUser', user);
}

[0xD34F]

Evgenii Borovoi, гляньте сюда.

[Evgenii Borovoi]

0xD34F, спасибо!

[Александр]

Блин, как же я пропустил этот момент с геттерами и сеттерами у computed ! Спасибо!

Answer 2

[Антон Швец]

Можно в v-model отдать ссылку прямо на стейт, но лучше через computed. И правильнее и сохранится возможность ослеживать, тестировать и изменять данные.

Answer 3

[Андрей Седышев]

Вдобавок к вышеотписавшимся могу добавить ссылку на достаточно хороший курс по Vuex:
https://vueschool.io/courses/vuex-for-everyone

Answer 4

[Антон Антон]

Если не нравится vuex, то есть альтернативы, начиная с простого контейнера https://ru.vuejs.org/v2/guide/state-management.htm... и заканчивая большим списком на гитхабе