[Feature Request]: Combine @State and @Mutation into a @Computed annotation
See original GitHub issueI 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.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:13
- Comments:12
@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
worked beautifully @scleriot