Using mappers to create a computed property for two-way binding

Question

Using mappers to create a computed property for two-way binding

In my Vue 2 project, I make use of vuex.

Currently, I am working on implementing two-way binding for this HTML element:

<input v-model="message">


computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

My aim is to use mappers within the get and set methods for cleaner code:

computed: {
  message: {
    get () {
      return ...mapState("obj", ["message"])
    },
    set (value) {
      ...mapMutations("obj/updateMessage", value)
    }
  }
}

However, I encounter errors on two lines:

return ...mapState("obj", ["message"])   -   Expression expected.

...mapMutations("obj/updateMessage", value) - Declaration or statement expected.

Is there a way to successfully use mappers within the get and set methods?

UPDATE: I have already imported mapMutations and mapState to the component.

javascript vue.js ecmascript-6 vuex

Answer 1

Answer №1

To begin, make sure to import the necessary elements, similar to how you imported Vuex with

import { mapState, mapActions } from 'vuex'

. Remember to import actions specifically, rather than mutations. Actions are asynchronous and the correct flow should always be to dispatch an action > commit a mutation > update the state.

Next, integrate these imports where they are needed:

computed: {
  ...mapState('obj', ['message']),
  // other computed properties ...
}

methods: {
  ...mapActions('obj', ['updateMessage']),
  // other methods ...
}

Now, onto the interesting part:

computed: {
  message: {
    get () {
      const cloneDeepMessage = cloneDeep(this.message)
      // potentially destructure here like >> const { id, title, description } = cloneDeepMessage
      return cloneDeepMessage // or if destructured some fields >> return { id, title, description }
    },
    set (value) {
      this.updateMessage(value)
    }
  }
}

It's advisable to also

import cloneDeep from 'lodash/cloneDeep'

to prevent direct state mutation by using cloneDeep when accessing state. This is a precaution emphasized by Vuex strict mode, which I suggest enabling solely during development.

The official documentation may not explicitly cover this aspect, but it's a recommended approach in my opinion, drawing from various corresponding sections and combining them effectively.

Answer 2

To begin, make sure to import the necessary elements, similar to how you imported Vuex with

import { mapState, mapActions } from 'vuex'

. Remember to import actions specifically, rather than mutations. Actions are asynchronous and the correct flow should always be to dispatch an action > commit a mutation > update the state.

Next, integrate these imports where they are needed:

computed: {
  ...mapState('obj', ['message']),
  // other computed properties ...
}

methods: {
  ...mapActions('obj', ['updateMessage']),
  // other methods ...
}

Now, onto the interesting part:

computed: {
  message: {
    get () {
      const cloneDeepMessage = cloneDeep(this.message)
      // potentially destructure here like >> const { id, title, description } = cloneDeepMessage
      return cloneDeepMessage // or if destructured some fields >> return { id, title, description }
    },
    set (value) {
      this.updateMessage(value)
    }
  }
}

It's advisable to also

import cloneDeep from 'lodash/cloneDeep'

to prevent direct state mutation by using cloneDeep when accessing state. This is a precaution emphasized by Vuex strict mode, which I suggest enabling solely during development.

The official documentation may not explicitly cover this aspect, but it's a recommended approach in my opinion, drawing from various corresponding sections and combining them effectively.

Using mappers to create a computed property for two-way binding

Answer №1

Similar questions

Creating a sorting function in VueJS requires a few key steps

Is there a way to create a dynamic gallery using Magnific Popup that showcases both images and an iframe video together?

The information provided has been cut off: 1406 The content exceeds the permitted length for the 'image' column in row 1

Is it possible to hide a menu by removing a class when the user clicks outside the menu?

Can you please identify the TypeScript type associated with the return value of the match() method in String prototype?

Issues with location forecasts and .getPlace() when utilizing the Google Maps loader for Place Autocomplete in Vue are causing functionality problems

Sorting and dividing an Array using Angular

Stop mega menu items from disappearing when hovered over

Deploying an AngularJS 1.x application bundled with Webpack to Tomcat server

Passing a parameter from a redirect function to an onClick in React using TypeScript

Having issues extracting information from easports.com due to difficulties with the <ea-elements-loader> element

Updating image URL for grouped objects with Fabric JS

Tips for extracting and utilizing a JSON object provided by the parent page:

Is there a way to get rid of the tiny black line beside the Instagram icon?

The functionality of JQuery fails to work properly when receiving an AJAX response

What could be causing the JSON output to appear in a disordered fashion?

If the if logic in Express.js fails to function properly, it will consistently output the same message

What is the reason behind JavaScript's restriction on using double comparison operators?

What are your thoughts on the combination of Vue.js and Codenvy

Object is not compliant with HTMLInputElement interface and cannot execute 'stepUp'