Vuex中如何将一个状态对象传入另一个状态对象？

嘿，我碰到过类似的问题！你这个情况大概率是因为初始化时的字符串插值只会执行一次——虽然你能通过console.log看到theName已经存入state，但notifications.notification里的插值是在state初始化阶段就计算完成的，后续theName更新后，它并不会自动重新生成，所以才会出现undefined或者旧值的情况。

先给你模拟一下可能的错误写法，看看是不是和你的情况对上：

// 错误示例：初始化时的静态插值不会自动更新
const state = {
  theName: '',
  notifications: {
    // 这里只会在state初始化时计算一次，后续theName变化也不会更新
    notification: `欢迎你，${state.theName}!`
  }
}

const mutations = {
  SET_NAME(state, name) {
    state.theName = name
    // 这里没同步更新notifications.notification
  }
}

下面给你两种靠谱的解决方案：

方案一：用Getter动态计算（推荐） #

Getter会自动响应state的变化，每次theName更新时，都会重新计算通知内容，不需要手动维护：

const state = {
  theName: '',
}

const getters = {
  // 每次调用这个getter都会基于最新的theName生成内容
  notification: state => {
    return `欢迎你，${state.theName}!`
  }
}

// 组件里获取时直接用：
// this.$store.getters.notification

方案二：在Mutation里同步更新状态 #

如果你一定要把notification存在state的notifications对象里，那每次更新theName的时候，同步更新notification就好：

const state = {
  theName: '',
  notifications: {
    notification: ''
  }
}

const mutations = {
  SET_NAME(state, name) {
    state.theName = name
    // 同步更新notification，用刚传入的name或者更新后的state.theName都行
    state.notifications.notification = `欢迎你，${name}!`
  }
}

最后再提醒你两个小细节：

• 不要在state初始化时用this指向state，初始化时this的上下文可能不对，直接用state变量或者在mutation里操作才是正确的姿势。
• Vuex的state是响应式的，但只有当你直接修改state的属性时才会触发更新，静态字符串插值属于一次性计算，不会自动响应变化，必须通过mutation或者getter来处理动态内容。

内容的提问来源于stack exchange，提问作者Sergio