object-path 在项目中的使用

背景介绍

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

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

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

组件部分代码：

<template>
.......
        <div v-if="resume[item.title] instanceof Array">
<!-- resume[item.title] 的形式 是： [{key1: value1},{key2: value2}.....] -->
          <h2> {{ titles[item.title] }} </h2>
          <div v-for="(subitem,index) in resume[item.title]">
            <div v-for="(value,key) in subitem">
              <label v-bind:label="labels[key] || key"></label><br>
              <input type="text" v-bind:value="value"
                     v-on:input="updateValue(item.title,key,$event.target.value,index)">
               <!-- 当要更新的数据是数组时，传入 index-->
            </div>
            <hr>
          </div>
        </div>
        <div v-else>
          <h2> {{ titles[item.title]}}</h2>
          <div v-for="(value,key) in resume[item.title]">
       <!-- resume[item.title] 的形式 是：{ key: value } -->
            <label v-bind:label="labels[key] || key"></label><br>
            <input type="text"
                   v-bind:value="value"
                   v-on:input="updateValue(item.title,key,$event.target.value)">
          </div>
        </div>
......
</template>
<script>
export default {
......
  methods: {
      updateValue(title, key, value, index) {
        this.$store.commit('updateValue', {title, key, value, index})
      }
    }
}
</script>  

在 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源码解析