useFieldArray with Pinia store

[jiblett1000]

Hello,

Wondering how to use useFieldArray within a Pinia store. I encounter one problem or another when trying to use it. Either my array has trouble with reactivity or it resets when changing routes. It's just buggy in general. Not sure where to go from here....

My store:

import { defineStore } from "pinia";
import { useForm } from "vee-validate";
import { array, object, string } from "yup";
import { useSettingsStore } from "~/stores/settings";

const recipeSchema = object().shape({
  ingredients: array().of(
    object().shape({
      name: string(),
      volume: string().required(),
      unit: string(),
      abv: string(),
      cost: string(),
    })
  )
});

export const useRecipeStore = defineStore("recipe", () => {
  const settings = useSettingsStore();

  const defaultIngredient = {
    name: "",
    volume: "",
    unit: settings.defaultUnitOption,
    abv: "",
    cost: "",
  };

  const { values } = useForm({
    validationSchema: recipeSchema,
  });

  const {
    remove: removeIngredient,
    push: addIngredient,
    fields: ingredients,
  } = useFieldArray("ingredients");

  return {
    ingredients,
    defaultIngredient,
    addIngredient,
    removeIngredient
  };
});

Accessing the array:

<template>
  <RecipeIngredient
    v-for="(ingredient, i) in ingredients"
    :key="ingredient.key"
    :index="i"
    :ingredient="ingredient.value"
    @remove="removeIngredient(i)"
  />

  <button
    type="button"
    @click="addIngredient(defaultIngredient)"
  >
    <PlusIcon class="h-8 w-8" />
    Add Ingredient
  </button>
</template>
<script setup>
import PlusIcon from "~icons/material-symbols/add";
import { useRecipeStore } from "~/stores/recipe";

const { ingredients, addIngredient, removeIngredient, defaultIngredient } = useRecipeStore();
</script>

Any ideas what to do?

[jiblett1000]

Anyone? 😭

[logaretm]

Sorry for the delay, does it work if you take it out of the Pinia store? I can try to setup a sample within the week to test it out but would be great if you can provide an example that I can fork/download.

[jiblett1000]

@logaretm No worries. Looks like you've been busy with the new release 😁. I'll try and get a stackblitz set up tonight.

[jiblett1000]

@logaretm Ok. I put this together somewhat quickly so I can get to sleep 😪 . Hopefully, it does the trick. It's entirely possible I'm totally misunderstanding how to use this properly. Anyways...

https://stackblitz.com/edit/nuxt-starter-qwqz99?file=package.json,app.vue,nuxt.config.ts,stores%2Frecipe.ts,components%2FTextInput.vue,components%2FRecipeIngredient.vue,pages%2Findex.vue,pages%2Fanother.vue

If you enter some values, add an "ingredient", etc; you can see the values and array items updating successfully in the Vue devtools. However, upon changing to "another page", the values become undefined.

I think I was having other problems as well before, but I've since refactored some things in my app so I can't recall exactly. But, any insight into how to integrate useFieldArray with Pinia properly would be great in general.

[logaretm]

Thanks for the sample, I will take a look at it while I can and sorry about the delay.

[logaretm]

Sorry for the delay, again....

I took a look and seems exactly the same issue as in #4269. If you add keepValuesOnUnmount to useForm it will work.

  const { values } = useForm({
    validationSchema: recipeSchema,
    keepValuesOnUnmount: true,
    initialValues: {
      ingredients: [
        {
          name: '',
          volume: '',
        },
      ],
    },
  });

By default vee-validate removes fields that get unmounted from the values object.

[jiblett1000]

@logaretm No worries. I appreciate you taking a look at that. 😄 I totally missed that option. I have a working implementation now, but if I can get that working with local storage, I might try and work that back into my pinia store. Thanks again 🙏