How to call setter for object in computed properties

Hello,

The Vuex documentation mentions using computed properties with getters and setters.

I’m trying to use the setter instead of called a $store.commit() for an object, but the setter is never called (unless I directly assign a new object).

Short demonstration:

	computed: {
		lpairs: {
			get: function() {
				console.log("getter called")
				return this.value
			},
			set: function(value) {
				console.log("setter called with value", value)
				this.$store.commit('updateValue', value)
			},
	},

The setter is never called when I call lpairs['xx'] = "testing" or the Vue.set way with this.$set(this.lpairs, 'xx', "testing") or really any combination I can come up with. I guess setters only work for assignments; is there a way to make the setter accept new keys or should I always call a store method if the computer property is an object?

In short, is it possible to add/delete a property on a computed property (with the setter running)?

You can try this

this.lpairs = { ...this.lpairs, xx: 'testing' }

But I’d rather drop the computed method and use the mutation in your component

this.updateValue({ xx: 'testing'}) // Method from mapMutations

and modify the mutation to update values correctly:

updateValue (state, payload) {
  state.value = {
    ...state.value
    ...payload
  }
}

Eventually add a mutation called setValue to replace the whole value object instead of merging it.

Yes, setters only work with direct assignments, just like regular javascript setters.
What @rayfranco said :+1:

2 Likes

Thanks all. I figured setters would follow Javascript rules, I was just wondering if there would be a way to make computer properties with getters and setters work as described in Vuex documentation with objects instead of simple values. But I guess there is no obvious way to use the setter on an object because of the limitations inherent in Javascript with new keys.

You can try deep watcher watch api

data() {
   return {
       lpairs: this.$store.getters.lpairs
   }
 },    watch: {
    lpairs: {
        handler(n, l) {
            this.$store.commit("updateValue", n);
        },
        deep: true
    }
}