Persisted State

[phuze]

I am storing the maska object in a pinia store.

<script setup>
  import { vMaska } from "maska"
  import { formSore } from "@/stores/myForm"
  const store = formStore()
</script>

<template>
  <input
      type="text"
      name="phone"
      v-maska="store.form.phone"
      data-maska="(###) ###-####"
  />
</template>

My pinia store has persisted state enabled.

import { defineStore } from "pinia"

export const formStore = defineStore({
  id: "myForm",
  persist: true,
  state: () => ({
    form: {
      first_name: '',
      last_name: '',
      email: '',
      phone: {},
    }
  })
})

Upon page reload, the maska input is not re-populated.
I can confirm that the object is being persisted.

How can I resolve this? See demonstration:

[beholdr]

Maybe you could use standard v-model binding for this case to save in the store?

[phuze]

Update:
@beholdr Could you please elaborate on what you mean?

If I utilize both v-maska and v-model, as demonstrated below, the field will be rendered on page reload as expected, however, maska will no longer generate the unmasked data as expected. Both object.masked and object.unmasked are the same value.

<script setup>
  import { vMaska } from "maska"
  import { formSore } from "@/stores/myForm"
  const store = formStore()
</script>

<template>
  <input
      type="text"
      name="phone"
      v-model="store.form.phone.unmasked"
      v-maska="store.form.phone"
      data-maska="(###) ###-####"
  />
</template>

import { defineStore } from "pinia"

export const formStore = defineStore({
  id: "myForm",
  persist: true,
  state: () => ({
    form: {
      first_name: '',
      last_name: '',
      email: '',
      phone: {
        completed: '',
        masked: '',
        unmasked: ''
      },
    }
  })
})

[beholdr]

I mean you save in the store masked value as is, and if you need unmasked value, you can use Maska programmatically to get it before sending a form for example.