vue中数组操作因{__ob__: Observer} 引发的问题

368 阅读1分钟

1.问题:

image.png

在vuex中通过splice 动态删除缓存组件list 中的某一项 发现删除后数组长度为0 但展开依旧有元素

 DEL_CACHED_VIEW: (state, view) => {
    for (const i of state.cachedViews) {
      if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
            state.cachedViews.splice(index, 1)
        break
      }
    }

2.说明:

  1. ob: Observer这些数据是vue这个框架对数据设置的监控器,一般都是不可枚举的。
  2. 网上有说通过JSON.parse(JSON.stringify(this.list))操作,我复制了一份然后再删除元素 发现并没有解决问题

3.解决

添加了定时器

 DEL_CACHED_VIEW: (state, view) => {
    for (const i of state.cachedViews) {
      if (i === view.name) {
          const index = state.cachedViews.indexOf(i)
          setTimeout(()=> {   //加定时器为了保证从新增编辑页返回列表时清除组件缓存
            state.cachedViews.splice(index, 1)
          },0)
        break
      }
    }