Как передать данные между vue компонентами - PullRequest
Новая
       20

Как передать данные между vue компонентами

0 голосов
/ 28 февраля 2020

Это касается Vuex и передачи данных из одного компонента в другой. Я хочу, чтобы переменная Module в CoreMods. vue передавалась на страницу ExternalWeb. vue. Вернее, следите за изменениями на внешней веб-странице.

Мой магазин. 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 является компонентом на главной странице. При нажатии на ссылку на главной странице, она ведет на страницу ExternalWeb. (Это уже было реализовано с использованием маршрутизатора)

В настоящее время этот код не работает. Может кто-нибудь помочь найти решение / альтернативу. Кроме того, как мне добавить эту часть к основному. js? Спасибо !!!

1 Ответ

0 голосов
/ 28 февраля 2020

возможным решением является возврат значения vuex store из вычисленного и просмотр вычисленного значения. 

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);
      }
  }
}
...