vuex 对象嵌套属性的修改 mutations set 很方便的写法

最新推荐文章于 2025-10-13 11:25:58 发布

原创最新推荐文章于 2025-10-13 11:25:58 发布 · 4.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用递归遍历和动态属性访问的方法，来实现对复杂对象状态的直接读取和修改。通过将参数键值对转换为数组并逐级定位对象，可以便捷地更新任意层级的对象属性。

需求：一个对象

const state = {
  user: {
    verify: {
      state: 0
    }
  }
}

我需要使用类似this.set({ 'user.verify.state': 1 })这种写法直接获取或修改state[user.verify.state]的值。不知道别人怎么写的，我的写法如下：

const mutations = {
  set(state, params) {
    Object.keys(params).forEach(key => {
      // 需要替换的值
      const val = params[key];
      const arr = key.split(".");
      if (arr.length > 1) {
        let obj = state;
        while ((arr.length - 1) && (obj = obj[arr.shift()]));
        obj[arr[0]] = val
      } else {
        state[key] = val
      }
    })
  }
}