How to apply reactivity when using Vuex?

Question

Vue.js

We are reworking the application, translating it to Vue.js. After splitting into single-file components, they started using Vuex and the question arose - the beauty of Vue for me is data reactivity.
But Vuex requires the use of mutations, not direct data modification in Vuex. How to be?

Example - the component has a checkbox field, how to make the data in it be output from Vuex and changed in Vuex? Those. was it reactive?

I did this - in the component I kept the tmp variable, which, when initialized in data(), gets the value from the Vuex state object and is associated with the checkbox via v-model.
And on the change event, a method is called that changes the Vuex object depending on the state of this temporary variable.

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

I think it's a crutch. What is the best way to use Vue reactivity when using Vuex?

Answer 1

Make a computed property whose getter returns a value from vuex, and the setter pulls the mutation:

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

https://jsfiddle.net/4nkh119u/

Answer 2

In addition to the above, I can add a link to a fairly good Vuex course:
https://vueschool.io/courses/vuex-for-everyone

Answer 3

If you don't like vuex, then there are alternatives, starting with a simple container https://ru.vuejs.org/v2/guide/state-management.htm... and ending with a large list on github