Vue: computed variable with arrow functions (second argument on setter)

[ibyteyou]

What problem does this feature solve?

One guy finded, that computed getter may use with arrow function and destructed variables/methods.

I went ahead, and appended this case to set(), but failed, because setter not called component.
Later, i tried use arguments: (locale => arguments[1].a.methods.updateLocale(locale)), but vuex can't use dispatch to this, because undefined.

I think this API looks nice and will reduce many new lines :D

What does the proposed API look like?

export default {
  computed: {
    ...mapGetters(['global']),
    locale: {
      get: ({ global }) => global.locale,
      set: (locale, { updateLocale }) => updateLocale(locale)
    }
  },
  methods: {
    ...mapActions(['updateLocale'])
  }
}

[posva]

Duplicate of https://github.com/vuejs/vuex/issues/1085

Make sure to open the issue at the right repo 😉

[shinynet]

I don't believe this is a duplicate of vuejs/vuex#1085. The OP was requesting that a computed setter be passed the component reference as a second argument (which is nothing to do with vuex).

A computed getter is already passed a component reference which allows one to reference component data in an arrow function. But the setter cannot reference component data if defined as an arrow function.

computed: {
  myComputed: {
    get: vm => vm.myData,
    set(value) {
      this.$store.dispatch('updateData', value);
    }
  }
}

If the setter was passed a component reference as the 2nd argument, you could do this:

computed: {
  myComputed: {
    get: vm => vm.myData,
    set: (value, vm) => vm.$store.dispatch('updateData', value)
  }
}

Consider re-opening?

[posva]

it was indeed different, opened a properly explained issue with no vuex (which was confusing)