Consider the following example Vue component:

Template:

<template>
  <input
    id="pin"
    v-model="pin"
    type="password"
    name="pin"
    placeholder="Pin"
    @input="removeSpace($event.target)"
  />
</template>

Script:

<script>
import { ref } from 'vue'

const pin = ref('')

const removeSpace = (target) => {
  pin.value = target.value.replace(/\s/g, '')
}
</script>

How would I go about moving the removeSpace function in this component to VueX4 store? So I can use it in multiple components? Can't seem to get it to work, the input field doesn't update.

I have tried something as follows:

Template:

<template>
  <input
    id="test"
    v-model="store.state.testPin"
    type="text"
    name="test"
    placeholder="test"
    @input="store.dispatch('removeSpace', $event.target)"
  />
</template>

VueX store:

import { createStore } from 'vuex'

const store = createStore({
  state: {
    testPin: ''
  },
  actions: {
    removeSpace(state, target) {
      state.testPin = target.value.replace(/\s/g, '')
    }
  }
})

export default store