Vuejs2 axios 突变：更新一个对象

Question

我有以下 user.js 文件“有效”但需要改进：

import * as mutationTypes from "../mutation-types";
import user from "./user_data";

export const state = user;

export const getters = {
  user: (state) => state
};

export const mutations = {
  [mutationTypes.SET_USER]: (state, payload) => {
    state.username = payload.username;
    state.avatar=payload.avatar;
    state.locale=payload.locale;
    state.currency=payload.currency;
    state.userid=payload.userid;
  }
};

export const actions = {
  setUser: ({ commit }, payload) => {
    commit(mutationTypes.SET_USER, payload);
  }
};

通过 axios 我收到了这个代表完整用户的有效负载，因此是状态：

payload:{
    userid: "EA7FD2025132E3254A11FE70E9746A52",
    username: "boss",
    level:  6,
    active: true,
    company:'mySite ltd',
    landingpage:'dashboard',
    locale:'es',
    currency:'eur',
    subscriptionlevel:'',
    subscriptionexpiry:'',
    credits:0,
    name: "John Doe",
    email: "john.doe@mysite.com",
    avatar: "/static/avatar/john.jpg",
    job: "mySite - FOUNDER & CEO",
  }

如何在不更新单个子参数的情况下完全更新状态 即是这样的：

export const mutations = {
  [mutationTypes.SET_USER]: (state, payload) => {
    state = payload;
  }
};

我试过了

state = Object.assign({}, payload)

但它不起作用:-(

这里是 vuex 状态：

Answer 1

Vuex 中的状态和相关功能（mutations、getter 等）被设想为包含多条信息、多个切片，您可以使用它们来管理应用程序状态。

一次改变整个状态是一个不寻常的用例：如果可能的话，我会回答自己。

由于@Dan 在他/她的回答中解释的原因，当您在 mutation 方法中将 Javascript 对象指向新对象时，原始对象不会更改，而是传递给该方法的引用指向payload 在您的示例中。结果，原始对象没有改变。 Dan Abramov 在他的 Just Javascript 博客文章中写了一篇关于突变的精彩文章：请，如果你有时间，我建议你查看它们。

因此，与其尝试改变整个state，不如只改变一个片段，比如state.user。

为了让它正常工作，你需要初始化Vuex state如下（假设user是从外部文件导入的）：

export const state = {
  user: user
}

或者更简洁，使用ES6 object property values shorthand syntax：

export const state = {
  user
}

您可以根据需要在此处定义任意数量的属性，以反映您的实际应用程序状态并用初始值填充它们。

然后，您可以安全地在相应的mutation 上对这个切片进行变异：

export const mutations = {
  [mutationTypes.SET_USER]: (state, payload) => {
    state.user = payload;
  }
};

你还需要修改相关的getters：

export const getters = {
  user: (state) => state.user
};

Answer 2

为什么不起作用

当你重新分配一个已经包含一个对象的变量时，它不会改变现有的对象，只会将变量指向一个新的对象。旧的参考连接丢失。因此，在突变中重新分配 state 对实际的底层 state 对象没有任何作用。使用 =、Object.assign 或 ... 扩展运算符没有区别。

最好将用户对象置于state.user这样的状态：

state = payload  // ❌ Only reassigns the variable reference, no changes to original

state.user = payload  // ✅ Changing a reference property via the parent reference

另一种看待它的方式是记住函数中的state不一定总是与模块中的state相同，实际上它是shadows。

不直接使用state对象的一些原因：

1. 在突变中更难改变它。
2. 更难与mapState helper 一起使用
3. 代码可读性/可测试性

---

store.replaceState

如果您仍想以这种方式使用 state，并且您没有使用 Vuex 模块，有时可以使用 store.replaceState 轻松完成。也可以用模块来完成，但有点棘手：

export const mutations = {
  [mutationTypes.SET_USER]: (state, payload) => {
    this.replaceState(payload);
  }
};