项目中遇到的问题，因为流程整体名称和用户任务名称共用了name，所以如果保存的时候选中了用户任务名称，就会把流程整体名称误存成用户任务名称，因为代码逻辑太复杂了看不懂，所以准备采取一个简单粗暴的方法，就是把流程整体名称存进vuex，最后保存的时候把name保存成存进vuex的流程整体名称。

使用vuex存储数据和提取数据，用到的是mapMutations和mapState。

1.在store的index.js文件中，新建一个变量processName用来存放流程整体名称。

import Vue from "vue";
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex);
// 创建一个store仓库
const store = new Vuex.Store({
  state: {
    viewType: "",
    processName: ""
  },
  getters: {},
  mutations: {
    viewType(state, value) {
      state.viewType = value;
    },
    setProcessName(state, value) {
      state.processName = value;
    }
  },
  actions: {},
  // 添加模块
  modules: {},
  // 开启严格模式，仅需在创建 store 的时候传入 strict: true：
  // strict: process.env.NODE_ENV !== 'production'
  strict: false
});
export default store;

2.需要把流程整体名称存进vuex的processName里面。

首先在更新流程整体名称/用户任务名称的文件ElementBaseinfo.vue中import mapMutations和mapState。  

mapMutations用来存储数据，import之后，直接this.mapMutations(需要保存的数据)

mapState用来提取数据，import之后，直接this.vuex中保存的变量名。

computed和methods中与之对应，...mapState(["processName"])，括号内是vuex中保存的变量名；...mapMutations(["setProcessName"])，括号内是vuex中mutations的方法名。

<script>
import {mapMutations, mapState} from "vuex"
export default{
  computed: {
    ...mapState(["processName"])
  },
  methods: {
    ...mapMutations(["setProcessName"])
  }
}
</script>

import之后，将数据存进vuex。在该项目中，当type为process时，需要把name存进processName中。

updateBaseInfo(key) {
      const attrObj = Object.create(null);
      attrObj[key] = this.elementBaseInfo[key];
      if (key === "id") {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, {
          id: this.elementBaseInfo[key],
          di: { id: `${this.elementBaseInfo[key]}_di` }
        });
      } else {
        window.bpmnInstances.modeling.updateProperties(this.bpmnElement, attrObj);
      }
      window.baseInfo = this.bpmnElement.businessObject;
      if (this.elementBaseInfo.$type === 'bpmn:Process') {
        this.setProcessName(this.elementBaseInfo.name)
        console.log(this.processName)
      }
    },

3.存进去之后，需要在点击保存按钮的时候，将processName提取出来赋给流程整体名称。

找到保存按钮所在的页面ProcessDesigner.vue，也需要import mapMutations和mapState。  import的内容和上面一样，不再赘述。保存的时候，提取this.processName赋给name，就成功保存为流程整体名称了。

saveData() {
      this.bpmnModeler.saveXML({ format: true }).then(({ xml }) => {
        console.log(xml);
        let _obj = window.baseInfo;
        _obj.name = this.processName;
        _obj.xml = xml;
        _obj.processCode = _obj.id;
        _obj.processStorageKey = JSON.parse(this.parentData).processStorageKey;
        _obj.deploymentId = JSON.parse(this.parentData).deploymentId;
        _obj.id = JSON.parse(this.parentData).id;
        window.parent.postMessage(JSON.stringify(_obj), "*");
      });
    },

 还有一种方法存取vuex值

取值：

this.$store.state.processName

存值：

''内是vuex变量，后一个是要存进去的数据

this.$store.commit('processName', res.data.data.name)