控件的v-model到底该不该直接绑定vuex的state属性？

刚开是学习和使用vuex的方式都是按照官方提供的使用方式：1、定义 state、getters、mutations

state: {
    abc: '',
},
getters: {
    getAbc(state) {
        return state.abc
    },
},
mutations: {
    updateAbc(state, val) {
        state.abc = val
    },
},

2、在vue页面中使用 store，通过如下步骤保持页面和 store 数据同步。

• 定义一个 data 属性，用来绑定控件的 v-model；
• 在created方法中，通过mapGetters给定义的 data 属性赋值；
• 当控件修改v-model属性后，在该控件对应的事件里面通过 this.$store.commit('', val)修改该属性（同步store）；

<template>
  <div>
    <div>{{getAbc}}</div>
    <el-input v-model="abc" @change="handleChagne"></el-input>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapGetters(['getAbc']),
  },
  created() {
    this.abc = this.getAbc
  },
  methods: {
    handleChagne(val) {
      this.$store.commit('updateAbc', val)
    },
  },
  data() {
    return {
      abc: '',
    }
  },
}
</script>

但是现在发现一个问题，页面中定义的所有关于abc属性的data属性，created中的赋值，methods中修改abc的代码都有点多余，这些代码没有任何业务逻辑，全部为了本地变量和store中的变量同步而服务，感觉很浪费；

后来我发现，如果把 state 的 abc 封装成一个对象，那么v-model就可以直接绑定一个getters属性了，从而代码得到了极大的简化，如下：

1、定义 store

• 去掉了mutations中修改state变量的方法

state: {
    formModel: {
        abc: '',
    }
},
getters: {
    getFormModel(state) {
        return state.formModel
    }
},

2、在vue页面中使用 store

使用页面简化如下：

• 去掉了data属性定义；
• 去掉了created中为data属性赋值代码；
• 去掉了控件在修改data属性后，同步store代码；

<template>
  <div>
    <div>{{getFormModel.abc}}</div>
    <el-input v-model="getFormModel.abc"></el-input>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  computed: {
    ...mapGetters(['getFormModel']),
  },
}
</script>

从上面定义 store 和 使用页面代码简化来看，这是非常可观的，尤其是当 store 变量非常复杂时，如此精简时非常有必要的。

那么大家对这种简化的使用方式有什么意见呢？或者说大家一般都怎么使用 store 呢？