Vue 项目开发常见错误的组织和解决方案（四）

问题说明: 项目需求是做一个 PCB 管理的功能，功能模块主要分为我的洗板，我的领板，我的贴片和我的加洗。对我的已完成的洗板进行领板申请，申请成功后需要跳转至我的领板 -> 进行中，刷新我的领板数据。目前遇到的问题是有成功跳转到我的领板，但跳转到我的领板 -> 已完成。

下图是网站的主页

点击已完成

对其中一条数据，点击领板操作

跳转至我的领板 -> 已完成

实际上是希望跳转至我的领板 -> 进行中，显示新的领板申请记录，如下图所示

截取部分代码如下：

   <!-- 页面操作 -->
        <el-table-column
          fixed="right"
          align="center"
          min-width="80"
        >
          <template slot="header">
            {{ $t('pcb.tableView.Operation') }}
            <br>
            Operation
          </template>
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="success"
              @click="onShowDialog(scope.row)"
            >
              {{ $t('pcb.button.Recieve') }}</el-button>
          </template>
        </el-table-column>
 <!-- 逻辑方法 -->
     // 显示领板对话框
    onShowDialog(row) {
      if (row.store_num !== 0) {
        this.dialogFormVisible = true;
      } else {
         this.$notify.error({ message: this.$t('pcb.message.NoStock') });
        }
      this.form.pcb_number = row.pcb_number;
      this.form.store_num = row.store_num;
      this.pcb_number = row.pcb_number;
      this.resetForm('form');
      this.form.number = null;
    },
    // 申请领板
    dialogFormSubmit(formName) {
      const param = {
        pcb_number: this.pcb_number,
        num: this.form.number
      };
      // 表单提交验证
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          this.$notify.warning({ message: this.$t('pcb.message.WrongNum') });
          return;
        }
        this.$api.modules.pcb.recieveApply(param).then((res) => {
          if (res.errCode !== 0) {
            this.$notify.warning({ message: res.message });
            return;
          } else {
             this.$notify.success({ message: this.$t('pcb.message.Recieve') });
             this.dialogFormVisible = false;
          // 更新数据
             this.$store.dispatch('pcb/getMyRecieveData');
          }
        }).then(() => {
          // 标签切换
          this.$store.commit('pcb/setPcbTab', 'recieve');
        });
      });
    }

代码的逻辑比较简单，点击领板按钮，弹出领板填写对话框，然后提交表单。提交表单是调用了接口函数 reciveveApply, 网络请求成功后就进行数据更新，这里是用了 vuex 对全局变量我的领板数据进行更新。更新完用用了一次 vuex 去修改全局变量 pcbTab, 这个就是 tabs 页签跳转的功能，使完成领板后可以跳转到我的领板。但是结果是跳转至我的领板 -> 已完成，原因是因为之前我们是在我的洗板 -> 已完成中操作的，这个切换按钮是一个通用组件，在我的洗板改变了这个状态值，这个数据就一直保留，并没有更新。所以解决的方法应该有很多，我这里想到两种。

方法一：可以使用 vuex 来管理这个状态值，设置变量名为 activeStatus。 在代码中加一句代码 this.$store.commit('pcb/setActiveStatus', 'doing')，在 store pcb.js mutations 中添加方法

setActiveStatus(state, value) {
      state.activeStatus = value;
    }

通过状态管理 vuex 应该是可以实现这个功能的。

方法二：可以通过传值的方式更新 currentStatus 的值，在代码中加一句 this.$emit('changeStatus', 'doing')，在它的父组件中添加代码如下：

    <!-- 已完成列表 -->
      <FinishTable
        v-else-if="activeStatus === 'finish'"
        :table-data="myPrintingData.finish"
        :param="param"
        @changeStatus="changeStatus"
      />
    <script>
    // 切换状态按钮
    changeStatus(value) {
      this.currentStatus = value;
      console.log(this.currentStatus);
      this.$emit('changeActive', 'doing');
     }
    </script>

但是值传到这里的时候，发现这个值并没有影响到我的洗板功能，只是改变了父组件我的洗板的状态值。所以在 changeStatus 方法中继续给它的父组件传值，通过 this.$emit('changeActive', 'doing') 这句代码实现，然后找他爷爷组件，在组件添加如下代码：

  <!-- 我的洗板 -->
        <el-tab-pane
          :label="tabs[0].label"
          :name="tabs[0].name"
        >
          <MyPrinting :active-status="activeStatus" @changeActive="changeActive" />
        </el-tab-pane>
          <!-- 我的领板 -->
        <el-tab-pane
          :label="tabs[1].label"
          :name="tabs[1].name"
        ><MyRecieve :active-status="activeStatus" />
        </el-tab-pane>
         <script>
    // 切换状态按钮
    changeActive(value) {
      this.activeStatus = value;
      console.log(this.activeStatus);
    }
    </script>

在这个组件中，我们看到作用我的领板的值是 activeStatus，然后通过 changeActive 方法来改变 activeStatus 的值，从而实现跳转至我的领板 -> 进行中。

效果图如下：

到此，这个问题就得到了解决，总结来说遇到类似的问题就是要去追溯源头，看看是哪里作用这个功能，然后对症下药。因为本人还是小白阶段，如果有大神有更好的方法，也请多多分享，不吝赐教。