[Feature Request]: Combine @State and @Mutation into a @Computed annotation

I am trying to bind a checkbox to my Vuex Store. My understanding is that I need to use v-model:-

<b-form-checkbox id="onlyMineFilterCheckbox" v-model="onlyMineFilter">Show only Mine</b-form-checkbox>

To do the binding, I need to create a computed property on my component class. I can either do this…

export default class MyView extends Vue {
  @Mutation updateOnlyMineFilter;
  @State(state => state.onlyMineFilter) onlyMineFilterState: boolean;
  get onlyMineFilter() {
    return this.onlyMineFilterState;
  }
  set onlyMineFilter(value: boolean) {
    this.updateOnlyMineFilter(value);
  }

or, this …

export default class MyView extends Vue {
  $store: any;
  get onlyMineFilter() {
    return this.$store.state.onlyMineFilter;
  }
  set onlyMineFilter(value: boolean) {
    this.$store.commit('updateOnlyMineFilter', value);
  }

The first option uses the vuex-class annotations which is consistent with the rest of my component, but it is verbose and the state/mutation members are only used once. The second option is less verbose but forces me to use $store directly, with the declaration of $store just to fool typescript which I don’t like.

What would be best, I think would be if the state accessor and the mutation could be combined into a single annotation… something like this…

@Computed(state => state.onlyMineFilter, 'updateOnlyMineFilter') onlyMineFilter: boolean;

What do we think? I am happy to attempt the implementation if we think it is a good design.

[scleriot]

@jacklp @JavascriptMick If you’re still interested, I just stumbled on the same issue for one of my project, and I just published a tiny library for 2 way binding : https://github.com/scleriot/vuex-class-state2way

[jacklp]

worked beautifully @scleriot