Is it possible to add computed properties on the fly?

I ask as I’m wondering if it would be possible to implement Vuex 2-way getter/setter as discussed here…

… as a directive.

So the idea would be something like this:

<component v-vuex.value="module/property" />

In the init() function it would assign the properties.

Just a really raw idea right now.

If not, maybe I could cheat it with Vue.set() and this.watch().

Not CPs per se, but you can dynamically register a watcher with $watch() that would mic the behaviour of a CP.

However, I don’t think a custom directive is a good place for such logic - it’s meant for low-level DOM work and is generally not well suited to work on component instances. For one, the directive only runs after the first render finished and there’s an element to bind to - so your CP would be missing on the first render.

*cough* $nextTick *cough* *cough*

:stuck_out_tongue_winking_eye:

cough I don’t get it cough

:yum:

I was implying I could hack an update with nextTick :stuck_out_tongue:

No idea if I can yet!

No idea if I even should…

Weekend hacking coming up

PS. cough: https://www.youtube.com/watch?v=InaRIYFPMiY

How about creating a mixin that takes an array of strings or something and sets up getter/setters for Vuex variables, that you can then use with v-model?

Just to report back…

I attempted this with a directive, and it started to smell pretty quickly, so I gave up on it.

I’d actually already made quite a robust little utility function that does a 2-way sync with vuex store:

computed: {
  foo: get('dev/foo'),  // get
  bar: sync('dev/bar'), // sync
  baz: sync('dev/getBaz', 'dev/setBaz'), // use custom getter and commit/action
},

Additionally:

  • when getting, it uses a getter if it exists, if not it falls back to state
  • when setting, it dispatches an action if one exists, if not it uses commit
  • when setting, it dispatches a sync event from the host component with the synced path and value
  • you can pass in separate paths for getter/state and action/commit

As @Herteby said, this makes it usable with v-model and also as I discovered the other day, completely compatible with .sync

<ui-input 
  v-model="foo"
  type="slider"
  label="Foo"
></ui-input>

Slowly but surely I’m building up a set of functions and practices that make working with Vuex less laborious.

1 Like