Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Question

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Currently, I am syncing a computed value to a component and using a computed setter when it syncs back from the component.

I'm wondering if there is a more concise way to replace a computed getter/setter with mapState and mapMutations. How can this be achieved in a more compact manner?

<template>
    <SomeComponent :value.sync="globalSuccess"></SomeComponent>
</template>
export default {
    //...
    computed: {
        globalSuccess: {
            get() {
                return this.$store.state.globalSuccess;
            },
            set(val) {
                this.$store.commit("globalSuccess", val);
            }
        }
    }
}

I attempted to replace it like so:

export default {
    //...
    computed: {
        ...mapState(["globalSuccess"]),
        ...mapMutations(["globalSuccess"]),
    }
}

However, mapMutations(["globalSuccess"]) interprets this.globalSuccess(value) as

this.$store.commit('globalSuccess', value)

based on the documentation of vuex.

Since my computed value is set internally with globalSuccess = true through :value.sync in the template and not this.globalSuccess(true), globalSuccess remains unset.

Do you have any suggestions on how to make this work differently? Or do I have no choice but to stick with computed values utilizing getter and setter?

javascript vue.js vue-component vuex computed-properties

Answer 1

Answer №1

Recently, I came across a fantastic vuex module called https://github.com/maoberlehner/vuex-map-fields. Intrigued by its functionality, I followed the installation steps provided:

// store.js
import { getField, updateField } from 'vuex-map-fields';
Vue.use(Vuex);
export default new Vuex.Store({
    getters: {
        getField,
        //...
    },
    mutations: {
        updateField,
        //...
    },
});

After setting up the module, I utilized the mapFields function in my component like so:

// App.vue
export default {
    //...
    computed: {
        ...mapFields(["globalSuccess"]),
    }
}

Through this implementation, I was pleased to see that it dynamically mapped to a computed setter and getter exactly as desired:

export default {
    //...
    computed: {
        globalSuccess: {
            get() {
                return this.$store.state.globalSuccess;
            },
            set(val) {
                this.$store.commit("globalSuccess", val);
            }
        }
    }
}

Answer 2

Recently, I came across a fantastic vuex module called https://github.com/maoberlehner/vuex-map-fields. Intrigued by its functionality, I followed the installation steps provided:

// store.js
import { getField, updateField } from 'vuex-map-fields';
Vue.use(Vuex);
export default new Vuex.Store({
    getters: {
        getField,
        //...
    },
    mutations: {
        updateField,
        //...
    },
});

After setting up the module, I utilized the mapFields function in my component like so:

// App.vue
export default {
    //...
    computed: {
        ...mapFields(["globalSuccess"]),
    }
}

Through this implementation, I was pleased to see that it dynamically mapped to a computed setter and getter exactly as desired:

export default {
    //...
    computed: {
        globalSuccess: {
            get() {
                return this.$store.state.globalSuccess;
            },
            set(val) {
                this.$store.commit("globalSuccess", val);
            }
        }
    }
}

Answer 3

Answer №2

Here is a code snippet that I find useful:

export default {
  //...
  computed: {
    globalSuccess: {
      ...mapState({ get: 'globalSuccess' }),
      ...mapMutations({ set: 'globalSuccess' }),
    },
  },
}

No external dependencies required. If this code snippet is used frequently, it might be beneficial to create a helper function for it, but in its current form, it works quite effectively.

Answer 4

Here is a code snippet that I find useful:

export default {
  //...
  computed: {
    globalSuccess: {
      ...mapState({ get: 'globalSuccess' }),
      ...mapMutations({ set: 'globalSuccess' }),
    },
  },
}

No external dependencies required. If this code snippet is used frequently, it might be beneficial to create a helper function for it, but in its current form, it works quite effectively.

Instead of using a computed getter/setter, make use of mapState and mapMutations to simplify

Answer №1

Answer №2

Similar questions

Typescript counterpart of a collection of key-value pairs with string keys and string values

Frontend update: Changing the display format for dates

Creating a multi-dimensional array using information from a database

To ascertain whether the mouse is still lingering over the menu

Parsing JSON sub items in Android application using Java

Angular Material's md-checkbox is a required component

Sorting nested table rows in vueJS is an essential feature to enhance

React Scroll and Material-UI button active link not functioning correctly

Shut down the tab or browser window containing information on vue

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Dealing with error management in Transfer-Encoding chunked HTTP requests using express and axios

Leveraging Variables within my .env Configuration

How can I create a dropdown menu that is dependent on another dropdown menu using Ajax in my Laravel application?

Encountering an issue with Nuxt 3.5.1 during the build process: "ERROR Cannot read properties of undefined (reading 'sys') (x4)"

Arrange the div and ensure that the external JavaScript file functions properly when the page loads

Nested Promises in Angular's $q Library

Partially Assessed Ajax Response

The route in my Node.js Express application appears to be malfunctioning

Developing a fresh Outlook email using a combination of javascript and vbscript

The functionality of Bootstrap Tabs is compromised when used within a jQuery-UI dialog window