object-path 在项目中的使用

背景介绍

项目中的数据用 vuex 来管理，需要动态更新的数据有两种形式：
[{key1: value1},{key2: value2}.....]
{ key: value }

不使用 object-path 时的数据更新

主要根据updateValue函数的参数中有没有有效的index 来区分的更新数据

组件部分代码：

在 store.js 中：

   updateValue(state,{title,key,value,index}) {
      if(index !== undefined){
        state.resume[title][index][key] = value
      } else {
        state.resume[title][key] = value
      }
    }

使用 object-path

安装 object-path

npm install object-path --save

安装之后可以看到 package.json里的变化：

image.png

引入并使用 object-path

在store中引入：

import objectPath from "object-path"
...
updateValue (state,{path,value}){
      objectPath.set(state.resume,path,value)
    }

先来看个小例子：

let obj = {
  a: {
    b: "d",
    c: ["e", "f"],
    '\u1200': 'unicode key',
    'dot.dot': 'key',
    test1: [{name: 'xxx1',content: 'test1'},{name: 'xxx2',content: 'test2'}],
    test2: {key:'abc', value: 'sss'}
  }
};
objectPath.set(obj, "a.test1.1.name", "newName");  // 简单的更改值
objectPath.set(obj,"a.test2.key","newKey");
console.log(obj);

image.png

往数组中push 一个对象：

objectPath.push(obj, "a.test1", "{name:'',content:''}");
console.log(obj);

image.png

删除数组中的某一项：

objectPath.del(obj,["a","test1",0]);
console.log(obj);

image.png

了解了怎么使用之后就可以正式使用了

参考：

• object-path GitHub地址
• object-path源码解析