Error is caused by state variable triggering mutation

Question

Error is caused by state variable triggering mutation

In my store module, I am encountering an issue with the following pseudo-code:

const state = {
  users: []
}

const actions = {
 addUsers: async ({commit, state}, payload) => {
   let users = state.users // <-- problem
   // fetching new users
   for(let i of newUsersThatGotFetched) {
     users.push('user1') // <-- really slow
   }
   commit('setUsers',users)
 }
}

const mutations = {
  setUsers: (state, { users }) => {
    Vue.set(state, 'users', users)
   }
  }

Upon running this code, I am getting the error message

Error: [vuex] Do not mutate vuex store state outside mutation handlers

.

Disabling strict mode resolves the error, but results in a significant decrease in performance. It seems like the errors are occurring without being displayed.

The issue appears to be at the point where I commented // <-- problem. However, when I modify that line to

 let users = []

everything functions smoothly. Unfortunately, I require the data from state.users and cannot proceed with an empty array.

javascript vue.js store vuex

Answer 1

Answer №1

The issue lies with the line users.push('user1'), as it directly modifies the state.

To address this, refrain from making any direct changes to the state in actions and instead handle these mutations within a separate mutation function.

 addUsers: async ({ commit }, payload) => {
   // fetching new users
   commit('setUsers', newUsersThatGotFetched)
 }

In the mutation function, incorporate the logic to add the new users to the state.

const mutations = {
  setUsers: (state, users) => {
    state.users.concat(users);
    // or apply custom logic for adding users
    users.forEach(user => {
      if (whatever) state.users.push(user)
    });
  }
}

The lagging performance can be attributed to Strict mode

Strict mode executes a synchronous deep watcher on the state tree to detect inappropriate mutations, resulting in increased overhead when multiple state modifications are made. It is advisable to disable it in production to enhance performance efficiency.

To optimize the mutation process, consider making changes on a new array before replacing the existing one in the state.

const mutations = {
  setUsers: (state, newUsers) => {
    state.users = newUsers.reduce((users, user) => {
      if (whatever) users.push(user);
      return users;
    }, state.users.slice()); // here, we initiate with a copy of the array
  }
}

Answer 2

The issue lies with the line users.push('user1'), as it directly modifies the state.

To address this, refrain from making any direct changes to the state in actions and instead handle these mutations within a separate mutation function.

 addUsers: async ({ commit }, payload) => {
   // fetching new users
   commit('setUsers', newUsersThatGotFetched)
 }

In the mutation function, incorporate the logic to add the new users to the state.

const mutations = {
  setUsers: (state, users) => {
    state.users.concat(users);
    // or apply custom logic for adding users
    users.forEach(user => {
      if (whatever) state.users.push(user)
    });
  }
}

The lagging performance can be attributed to Strict mode

Strict mode executes a synchronous deep watcher on the state tree to detect inappropriate mutations, resulting in increased overhead when multiple state modifications are made. It is advisable to disable it in production to enhance performance efficiency.

To optimize the mutation process, consider making changes on a new array before replacing the existing one in the state.

const mutations = {
  setUsers: (state, newUsers) => {
    state.users = newUsers.reduce((users, user) => {
      if (whatever) users.push(user);
      return users;
    }, state.users.slice()); // here, we initiate with a copy of the array
  }
}

Error is caused by state variable triggering mutation

Answer №1

Similar questions

I am looking to generate an array containing sub arrays so that I can easily iterate through the JSON data

What is the best way to bring a module into an Angular project?

Starting your React application with the `npm start` command

Why isn't the correct component being shown by react-router?

SimpleLightBox refuses to function

What could be causing my Leaflet popup to suddenly close?

In Certain Circumstances, Redirects Are Applicable

What are the steps to configure an option date for Yesterday, Today, and Tomorrow?

The navigation bar initially fills the width of the screen, but does not adjust to match the width of the table when scrolling

Display PDF file retrieved from the server using javascript

JS - What is causing my JavaScript src to not work properly?

Display the message "currently being loaded" on a Django platform

Creating a "select all" feature in an HTML multiple select box with jQuery - a step-by-step guide

Simulate a failed axios get request resulting in an undefined response

Attempting to configure a discord bot. Can anyone help me identify the issue?

The controller is providing a null response following an ajax Post request

Using AngularJS to access JSON files through the $http service

Creating a search bar with React-Redux: A step-by-step guide

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

How to utilize a parameter value as the name of an array in Jquery