关于includes()和some()方法

const mutations = {
  Change(state) {
    state.isCollapse = !state.isCollapse
  },
  updateTab(state, value) {
//不判断if (value.name !== 'Main')会报错
    if (value.name !== 'Main') {     
      if (!state.tabData.includes(value)) {
        state.tabData.push(value)
        console.log(state.tabData)
      }
    }
  },
}
// 存储数据
const state = {
  isCollapse: false,
  tabData: [
    {
      path: '/home/main',
      name: 'Main',
      lable: '主页',
      icon: 's-home',
    },
  ],
}

menuData: [
        {
          path: '/home/main',
          name: 'Main',
          lable: '主页',
          icon: 's-home',
        },
        {
          path: '/home/user',
          name: 'User',
          lable: '用户管理',
          icon: 'user',
        },
        {
          path: '/home/mall',
          name: 'Mall',
          lable: '商品管理',
          icon: 's-goods',
        },

关于为什么要先判断if (value.name !== 'Main')，不然会报错

目的是为了判断tabData是否存在menuData中传来的数据， 本来认为if(!state.tabData.includes(value))足够判断，(value.name !== 'Main')多此一举

其实：

Array.prototype.includes()方法使用的是严格相等运算符（===）来检查数组中是否存在某个元素。当两个对象在内存中的引用不一样时，即使它们的内容相同，严格相等运算符也会认为它们不相等。

所以，如果你直接使用if (!state.tabData.includes(value))，可能无法正确判断value对象是否已经存在于tabData数组中。即使有一个内容相同的对象在数组中，由于它们是不同的引用，条件判断仍然会成立，导致重复添加对象。

在这里主页对象一个是在tabData内存中的，而传来的主页对象是在menuData内存中的，因此includes()认为不相同，重复添加，导致:key值重复从而报错。

解决：

为了确保正确判断是否存在，你需要遍历tabData数组，逐个比较数组中的对象和传入的value对象。可以使用Array.prototype.some()方法来实现这个遍历，并在其中进行对象内容的比较。

updateTab(state, value) {
      if (!state.tabData.some((item)=>item.name === value.name)) {
        state.tabData.push(value)
        console.log(state.tabData)
      }
  },