vue组件之间如何传递数据答案

【问题标题】：How to pass data between vue componentsvue组件之间如何传递数据
【发布时间】：2020-06-12 14:03:58
【问题描述】：

这是关于 Vuex 以及从一个组件到另一个组件的数据传递。我希望将 CoreMods.vue 中的 Module 变量传递给 ExternalWebpage.vue。或者更确切地说，在外部网页中查看更改。

我的 store.js 看起来像这样：

    import Vue from 'vue';
    import Vuex from 'vuex';

    Vue.use(Vuex);

    export default new Vuex.store({
        state:{
             CoreModule: ""
      },  
        mutations:{
             update: (state, n) => {
                state.CoreModule = n;
            }
         },

        getters:{
             updated: state =>{
                return state.CoreModule;
                    }
              },

        actions:{
              async createChange({ commit }, n) {
                commit("update", n);
                 }
            }
       });

我有一个 CoreMods.vue

    methods:{
        checkModule() {      
          if(!this.completed_cm.includes(this.Module)) {
               if (this.core.includes(this.Module)) {
                  this.completed_cm.push(this.Module);
                  this.$store.dispatch('createChange',this.Module);
  }
},

一个 ExternalWebpage.vue

     watch:{
         '$store.state.CoreModule': function(){
              var cm = this.$store.getters.updated;
              if(this.CompletedCore.indexOf(cm) == -1){
              this.CompletedCore.push(cm);
            }
          }
        }

我不能通过将一个组件导入另一个组件来使用道具。这是因为： 1）我不希望整个组件放置在父组件中。 2) CoreMod 是主页上的一个组件。单击主页上的链接后，将转到 ExternalWebpage。（这已经使用路由器实现了）

目前此代码不起作用。有人可以帮助找到解决方案/替代方案。另外，我应该如何将这部分添加到 main.js 中？谢谢！！！

【问题讨论】：

标签： javascript vue.js components vuex store

【解决方案1】：

可能的解决方案是从计算中返回 vuex 存储值并观察计算值。

computed: {
  coreModule () {
    return this.$store.state.CoreModule;
  }
},
watch:{
  'coreModule': function(){
      var cm = this.$store.getters.updated;
      if(this.CompletedCore.indexOf(cm) == -1){
          this.CompletedCore.push(cm);
      }
  }
}

【讨论】：