Wrap v-model changes in a $patch

I need to wrap v-model changes in a $patch. I am using vue3 and pinia, and have a working solution, but wondering if there is a better way to do this.

My current working pattern is:

<script setup lang="ts">
 someAttribute = computed({
    get() {
        return store.someAttribute;
    },
    set(val: string) {
        store.$patch(() => {
            store.someAttribute = val;
        });
    },
});
</script>
<template>
<input v-model="store.someAttribute" />

</template>

This does appear to work, but is a bit annoying to do for every single attribute that I'm going to bind with v-model.

I need this behavior because I have code that subscribes to store changes. If there are dependencies to someAttribute, then this triggers multiple change events. With the $patch there is ony one. I need there to be one event per user action since the other code is maintaining a history of the application state.

> I need to wrap v-model changes in a $patch.

Actually, you don't.
State properties and getters can be extracted to refs using storeToRefs from pinia.
Using ref with v-model establishes a 2-way binding between the store's state and the input's value.

See it working:

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

const { createApp } = Vue
const { defineStore, createPinia, storeToRefs } = Pinia

const useStore = defineStore("pokemon", {
  state: () => ({ foo: "ledom-v htiw etats ainip" }),
  getters: {
    reversedFoo() {
      return this.foo.split("").reverse().join("")
    }
  }
})

createApp({ setup: () => storeToRefs(useStore()) })
  .use(createPinia())
  .mount("#app")

<!-- language: lang-html -->

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/pinia@2.0.11/dist/pinia.iife.prod.js"></script>
<div id="app">
  <input v-model="foo" />
  <pre v-text="{ reversedFoo }" />
</div>

<!-- end snippet -->

In your case:

<script setup lang="ts">
import { storeToRefs } from "pinia"
//...
const { someAttribute } = storeToRefs(store)
</script>
<template>
  <input v-model="someAttribute" />
</template>

It can also be done in <template>, but it's not as neat, IMHO:

<input v-model="storeToRefs(store).someAttribute">

Important note:

Only state and getters store members should be extracted through storeToRefs. Not actions.

Here's a typical store usage:

<script setup>
//...
const { stateProp1, stateProp2, getter1, getter2 } = storeToRefs(store)
const { action1, action2 } = store

// all extracted store members are now ready for `<template />` usage

// storeToRefs returns refs, usable in `setup()` as:
stateProp1.value = 'whatever'

</script>