F7 react store getter is not Reactive on updating an object of array

Questions
1

how do i update an arraye in store to trigger Rerender or be Reative ?

this is what im doing :

my getter code :

personsWithNeonColor({ state }) {

      const personsWithNeonColor = state.persons.map(person => {
        const extendedPerson = { ...person };

        if (!person.nationalCode) {
          extendedPerson.neonColor = 'red'
        } else if (!person.dateOfBirth || !person.married || !person.address || !person.postalCode) {
          extendedPerson.neonColor = 'yellow'
        } else {
          extendedPerson.neonColor = 'green'
        }

        return extendedPerson;
      })
      return personsWithNeonColor
    },

this is my action :

async editPerson({ state }, person) {
      state.isLoading = true;

      try {
        const { data: editedPerson } = await axios({
          baseURL: f7.params.API_BASE_URL,
          url: f7.params.PERSONS_ENDPOINT,
          method: 'PATCH',
          data: person
        });

        const index = state.persons.findIndex(p => p.userId === editedPerson.userId);

        if (index > -1) {
          state.persons[index] = editedPerson;
        }

      } catch (error) {
        console.log(error);
      } finally {
        state.isLoading = false;
      }

    },
2

i need help, is this intended ?

3

To keep store reactive, state modification should be done with assignment. For example:

1 Like
4

so i should do somthing like this in order to update an specific index of array :

state.users = [...state.users.filter(something), editedUser];

i have to assign the whole object again ? its not gona be reactive if i just update a property like firstName of the object in that index ?

but if i do it like this , the edited person will be at the end of list , and not at the index it was before …

5

That was for example, you can modify the array whatever you want and the assign it to state property

6

i switched back to redux as i saw my data complexity will be growing as i go forward and f7 store will not fulfil my needs, as it is mentioned in the docs :

You can use library-specific state management libraries like Vuex for Vue, Redux for React, and use built-in Svelte store functionality. But in case if something simple is required then Framework7 Store can be a good fit.

thank you

7

for anyone who encounter this issue , this is what i did :

async editPerson({ state }, person) {
state.isLoading = true;

  try {
    const { data: editedPerson } = await axios({
      baseURL: f7.params.API_BASE_URL,
      url: f7.params.PERSONS_ENDPOINT,
      method: 'PATCH',
      data: person
    });

    const index = state.persons.findIndex(p => p.userId === editedPerson.userId);

    if (index > -1) {
      state.persons[index] = editedPerson;
      state.persons = [...state.persons];  // This line made it Reactive without losing the order of array
    }

  } catch (error) {
    console.log(error);
  } finally {
    state.isLoading = false;
  }

},