兄弟组件使用vuex存值取值

这是父组件 

<template>
<div>
    <hello></hello>
    <jieshou></jieshou>
</div>
</template>

<script>
import hello from "./HelloWorld.vue";
import jieshou from "./jieshou.vue";
export default {
  components: {
      hello,
      jieshou
  },
};
</script>

<style>
</style>

这是子组件HelloWord，这个组件表格的值存储于vuex中，提供给兄弟组件jieshou.vue使用

子组件HelloWord全部内容，提交给vuex部分在下方

<template>
  <div class="step-one">
    <div>{{recordData.record}}</div>
    <el-form>
      <el-row>
        <el-col :span="24">
          <el-button type="primary" id="addBtn" @click="addData"
            >新增</el-button
          >
        </el-col>
      </el-row>
      <el-table
        v-if="subDisabled"
        :data="recordData.record"
        style="width: 100%"
      >
        <el-table-column prop="pxmc" label="名称"> </el-table-column>
        <el-table-column prop="pxfs" label="方式"> </el-table-column>
        <el-table-column prop="pxdd" label="地点"> </el-table-column>
        <el-table-column prop="kscj" label="成绩"> </el-table-column>
        <el-table-column prop="sffz" label="是否"> </el-table-column>
        <el-table-column prop="zfzyxq" label="有效期"> </el-table-column>
        <el-table-column v-if="!subDisabled" prop="" label="操作">
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-form-item label-width="0">
            <el-table
              v-if="!subDisabled"
              :data="recordData.record"
              style="width: 100%"
            >
              <el-table-column prop="pxmc" label="名称">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.pxmc"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="pxfs" label="方式">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.pxfs"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="pxdd" label="地点">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.pxdd"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="kscj" label="成绩">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.kscj"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="sffz" label="是否">
                <template slot-scope="scope">
                  <el-input type="text" v-model="scope.row.sffz"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="zfzyxq" label="有效期" min-width="140">
                <template slot-scope="scope">
                  <el-date-picker
                    v-model="scope.row.zfzyxq"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    @click="handleDelete(scope.$index, scope.row)"
                    type="text"
                    size="small"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      subDisabled: true,
      count: 0, //记录第几次增加
      jclxList: [],
      xmlbList: [],
      recordData: {
        record: [
          {
            pxmc: "",
            pxfs: "",
            pxdd: "",
            kscj: "",
            sffz: "",
            zfzyxq: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.$store.commit("getData", this.recordData.record);
  },
  methods: {
    getData() {
      return this.recordData.record;
    },
    addData() {
      this.subDisabled = false;
      this.count++;
      if (this.count === 1) {
        return;
      } else {
        let rowObj = {
          pxmc: "",
          pxfs: "",
          pxdd: "",
          kscj: "",
          sffz: "",
          zfzyxq: [],
        };
        this.recordData.record.push(rowObj);
      this.$store.commit("getData", this.recordData.record);
      }
    },
    handleDelete(index, row) {
      if (this.recordData.record.length == 1) {
        this.$alert("不能再少啦", "提示", {
          confirmButtonText: "确定",
        });
        this.$store.commit("getData", this.recordData.record);
      } else {
        this.recordData.record.splice(index, 1);
        this.$store.commit("getData", this.recordData.record);
      }
    },
  },
};
</script>
<style  scoped>
.step-one {
  width: 100%;
  margin: 0 auto;
}
</style>

 

提交给vuex的mutation中，使用getData方法接收并储存

兄弟组件jieshou.vue中来取用储存于vuex中的值

这样HelloWord.vue表格新增删除的数据变化，兄弟组件jieshou.vue也可以事实变化