question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:13
  • Comments:12

github_iconTop GitHub Comments

4reactions
scleriotcommented, Feb 12, 2019

@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

3reactions
jacklpcommented, Feb 12, 2019

worked beautifully @scleriot

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mutations | Vuex
The only way to actually change state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events:...
Read more >
How To Manage State in a Vue.js Application with Vuex
A mutation is a method that mutates or updates the store property with the value provided. Getters are methods that can modify or...
Read more >
Vuex - GitLab Docs
The only way to change state in a Vuex store is by committing a mutation. Most mutations are committed from an action using...
Read more >
Variant Effect Predictor Plugins - VEP command line - Ensembl
Plugin Category Developer AncestralAllele Conservation Ensembl CADD. Combined Annotation Dependent Depletion Pathogenicity predictions Ensembl CAPICE Pathogenicity predictions Ensembl
Read more >
The Ensembl Variant Effect Predictor - Genome Biology
Multiple transcripts per locus result in greater numbers of annotations. These require filtering in a consistent manner, which increases the ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found