前端 - vue2项目this.$createElement创建的自定义组件里访问不了vuex，怎么解决？

Question

情况是这样，打算用this.$message提示信息，然后里面放上自己自定义的组件private-table，然后组件里用到了vuex，也就是this.$store里的数据，但是是undefined,请问出现这个问题的原因是啥，怎么解决？

          const h = this.$createElement          
          this.$message({
            message: h('div', {}, [
              h('div', {}, ['导入失败，Excel中存在重复信息：']),
              h('private-table', {
                props: {
                  table: {},
                  columns: [],
                  data: res.result,
                  'i-header-cell-style': 'height:36px;padding:0px;background-color:#FAFAFA;color:#333333;'
                }
              })
            ]),
            type: 'error'
          })

Answer 1

vue2里，element-ui的message是通过Vue.extend动态创建的，是一个独立的vue实例，不共享router、store这些项目初始实例才有的属性

如果都是用this.$message的形式调用的话，可以重写这个方法，在其通过Vue.extend创建message组件时，把项目初始实例传入parent选项中

或者改造private-table，把用到的router、store都是用import的方式手动引入

Answer 2

const h = this.$createElement;
this.$message({
  message: h('div', {}, [
    h('div', {}, ['导入失败，Excel中存在重复信息：']),
    h('private-table', {
      props: {
        table: {},
        columns: [],
        data: res.result,
        store: this.$store,
        'i-header-cell-style': 'height:36px;padding:0px;background-color:#FAFAFA;color:#333333;'
      }
    })
  ]),
  type: 'error'
});

private-table组件：

<script>
export default {
  props: {
    // ...
    store: Object 
  },
  created() {
    console.log(this.store); 
  }
};
</script>