Question

我的商店模块中有以下伪代码

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)
   }
  }

现在 - 当我运行此代码时，我收到以下错误Error: [vuex] Do not mutate vuex store state outside mutation handlers。

当我将严格模式设置为false时 - 错误消失了 - 但是处理时间确实很慢 - 好像错误仍然发生但没有显示。

问题似乎是我评论// <-- problem的地方，因为在我将该行更改为

之后

 let users = []

一切都运行得很完美，但我不能拥有，因为我需要state.users的数据

Answer 1

问题是：users.push('user1')，这是改变状态的行。

从操作中删除任何使状态发生变化（写入或更改）的内容，并将其移动到变异中。

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

然后在变异中添加新用户。

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

它缓慢的原因与Strict mode

有关

严格模式在状态树上运行同步深度监视器以检测不适当的突变，并且当您向状态进行大量突变时，它可能非常昂贵。确保在生产中关闭它以避免性能成本。

如果你想加速变异，你可以对一个新数组进行更改，这个数组将在准备就绪时替换状态中的数据。

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

状态变量触发突变错误

1 个答案: