splice 删除数组中对应的对象 $store 通过仓库删除数组中的对象

感悟：想法和思路才是最重要的、代码才是其次，我用了一种麻烦的方法来实现，中间还出错了，解决了很久。后来请教公司大神，忽然醒悟还有一种超级简单的方法来实现，其实之前自己也是通过这种简单地方式来实现的，但是这次解决这个问题的时候就是没有想到，看来真的遇到问题的时候还是要不耻下问的。

项目详情：逻辑是，我根据后台传过来的数组来弹出来相对应的弹框，数组的长度就是弹框的数量，换句话来说，就是弹框是通过数组遍历出来的，几个数组就是几个弹框，所以这就涉及到了关闭相对应弹框的需要

自己的笨方法：通过索引来关闭对应的弹窗

（1）数据来源

//接受到的数据
 _this.$store.state.xiaofang.socketData.SmokeAlarm = data.messageData
 for (var i = 0; i < data.messageData.length; i++) {
   // 数组长度只要大于0 说明就有弹框出现，遍历的是数组，数组长度即数组中对象的个数就是弹框的个数
    if (data.messageData.length > 0) {
      // 通过i变量来控制每一个弹框的展示  
        _this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${i}`] = true
        console.log(_this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${i}`])
      }
  }

（2）收到数据之后的页面处理

// $store.state.xiaofang.baojignStyle['huozaiLeftStyle'+index]  仓库中取得变量
// 'container-' + index  用ref使用的字符串
// 单独把这两个说明一下，就是因为我最起始的时候把变量写成了字符串的形式，导致花费了很久的时间改bug

<div v-for="(item, index) in arr" :key="index" :class='"yangan" + index'
v-show="$store.state.xiaofang.baojignStyle['huozaiLeftStyle'+index]"  
:ref="'container-' + index">

    <div>中间要展示的内容</div>

    <el-button @click="baojingConfirm(index, item)">关闭报警</el-button>

</div>
    

（3）关闭处理（删除对应的弹框）

//关闭对应的弹框
baojingConfirm (index) {
  this.$store.state.xiaofang.baojignStyle[`huozaiLeftStyle${index}`] = false
}

大神提示的简单的方法：通过删除数组的方式来关闭弹框

（1）接受到数据

//接受到的数据
 _this.$store.state.xiaofang.socketData.SmokeAlarm = data.messageData
 if (data.messageData.length > 0) {
  // 所有的弹框都用一个控制
   _this.$store.state.xiaofang.baojignStyle.huozaiLeftStyle = true
 }

（2）收到数据之后的页面处理

// 所有的弹框都用 $store.state.xiaofang.baojignStyle.huozaiLeftStyle 一个变量控制
<div v-for="(item, index) in arr" :key="index" :class='"yangan" + index'
v-show="$store.state.xiaofang.baojignStyle.huozaiLeftStyle"
:ref="'container-' + index">

    <div>中间要展示的内容</div>

    <el-button @click="baojingConfirm(index, item)">关闭报警</el-button>

</div>

（3）关闭（通过删除数组来关闭弹框）

//关闭对应的弹框  splice方法会改变原始数组
baojingConfirm (id, item) {
  this.arr.splice(id, 1)        
}