vue 利用vuex 将两个不相干的a,b页面实现互动,b页面点击提交，刷新a页面的table数据

vuex

export default {
    // 角色管理页面刷新
    isRole:true
},
  mutations: {
    updateRole(state, isRole){
      state.isRole = isRole
    }
  }
}

a页面

DOM

    <el-form-item>
        <el-button type="primary" @click="roleAdd" size="mini" icon="el-icon-document-copy">添加</el-button>
    </el-form-item>
        <el-table
            :data="detailslist"
            ref="table"
            border
            highlight-current-row
            style="width: 100%"
        >
            <el-table-column
              prop="roleName"
              label="角色名称"
              align="center"
            ></el-table-column>
        </table>

数据

    data(){
        detailslist:[]
    },
    computed: {
    isRole() {
        return this.$store.state.common.isRole;
    }
  },
    watch: {
        isRole(newVal, oldVal) {
          console.log(newVal);
          if (!newVal) {
            // 更新table 数据
            this.onSubmit();
          }
    }
  },
    methods: {
        set(val) {
          this.$store.commit("common/updateRole", val);
        },
        roleAdd() {
            this.set(true);
            // 跳转到b页面
            this.$router.push("/b");
        },
        onSubmit(){
            this.detailslist = [
                {roleName:Math.random() * 100},
                {roleName:Math.random() * 100},
                {roleName:Math.random() * 100},
            ]
            this.$message({
                message: "查询成功",
                type: "success"
            });
        }
    }

b页面

dom

<el-button type="primary" @click="onClos">关闭</el-button>

数据

    methods: {
        // 刷新角色管理页面
        set(val) {
          this.$store.commit("common/updateRole", val);
        },
        onClos() {
              this.set(false);
              this.$router.push("/a");
        }
    }