Pinia -vuejs: storeToRefs getters work in dev but not in production

Question

I am creating a SPA with vue3 and quasar. I use Laravel 10 as backend to access the database.

My getters when used as storeToRefs do not work in production although they work in dev. By work I mean return a correct value.

I use several stores and complex getters that often work using data from more than one store. To explain what happen, here is a simplified example (i.e. with a rather simple getter ) that illustrates the issue:

This is the activity store

import { defineStore } from "pinia";
import axios from "axios";
import { useParticipationStore } from "./participation";
import { useCommonStore } from './common'
export const useActivityStore = defineStore("activity", {
  state: () => ({
    activities: [],
    currentEventActivities: [], //the activities of the current event
    activityErrors: [],
  }),

  getters: {

    getCurrentEventActivities: (state) => {
      return (eventId) =>
        state.activities.filter(function (a) {
          return a.event_id === eventId;
        });
    },

and here is the component code

Code in script

import { useActivityStore } from "../stores/activity";
const activityStore = useActivityStore();

const { getCurrentEventActivities } = storeToRefs(useActivityStore());

code in template

<div v-for="(activity, index) in activityStore.activities" :key="index" >
    {{ activity }}
</div>
<hr />
<div>
    The selected event Id {{ selectedEventId }}
</div>
<div class="bg-blue-2">
    <div>The selected activities using storeToRefs</div>
    <div v-for="(activity, index) in getCurrentEventActivities(selectedEventId)" :key="index">
        {{ activity }}
    </div>
</div>

Here are what I get on the screen

In development

In production

I must add that both are using the same database. As you can see, the first part shows all the activities. As for the second part its shows the activities whose event_id is 3 in dev but nothing at all in production.

I have no idea of what to do.

Answer 1

As yoduh and toa pointed it, the trouble came from the backend returning different types in dev and prod. Could be a problem of server configuration. A found a workaround in adding a $casts array in my models e.g.

protected $casts=[
        'id' => 'integer',
        'event_id'=>'integer',
        'memberPrice' =>'float',
        'otherPrice' =>'float',
        'memberEntryFee'=>'float',
        'otherEntryFee'=>'float'
    ];