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:
foo: get('dev/foo'), // get
bar: sync('dev/bar'), // sync
baz: sync('dev/getBaz', 'dev/setBaz'), // use custom getter and commit/action
- when getting, it uses a
getter if it exists, if not it falls back to
- when setting, it dispatches an
action if one exists, if not it uses
- when setting, it dispatches a
sync event from the host component with the synced
- you can pass in separate paths for
As @Herteby said, this makes it usable with
v-model and also as I discovered the other day, completely compatible with
Slowly but surely I’m building up a set of functions and practices that make working with Vuex less laborious.