Vue.js метод доступа или родительский метод? - PullRequest
Новая
       43

Vue.js метод доступа или родительский метод?

0 голосов
/ 01 июня 2018

Я новичок в Vue и сумел сделать свое первое приложение с некоторыми глюками, но пока мне это очень нравится.Я использовал видеоурок, который начал с создания проекта vue-cli, который, как оказалось, немного отличается от веб-пакета.

Я создал проект, проект делает в основном то, что должен сейчас, яЯ пытаюсь провести некоторый рефакторинг, который включает в себя СУШКУ кода.

На каждой странице я хотел бы получить доступ к переменной, хранящейся в файле cookie, которую я делал, сохраняя и читая на HomeComponent в разделе скрипта, которыйработает как обещано. 

<script>
import MenuComponent from '@/components/MenuComponent.vue'
import Typewriter from '@/components/vue-type-writer.vue'

export default {
  name: 'HomeComponent',
  components: {
    MenuComponent,
    Typewriter
  },
  prop:{
      isPlaying: Boolean,
      username: String,
      currentSound: Object
  },
  data() {
      return{
         currentSound: null,
         isPlaying: false,
         username: ''
      }
  },
  methods:{
   clickButton() {
      this.msg= 'test 2'
   },
   toggleSound(){
      var a = this.currentSound;

      if (a.paused) {
        a.play();
        this.isPlaying = true;
      } else {
        a.pause();
        this.isPlaying = false;
      }
   },
   getCookieInfo(){
      var value = "; " + document.cookie;
      var parts = value.split("; weegreename=");
      if (parts.length == 2)
         this.username = parts.pop().split(";").shift();
      else this.username = '';
   },
   seveFormValues (submitEvent) {
      this.username = submitEvent.target.elements.name.value;
      this.$refs.audio1.pause();
      this.$refs.audio2.play();

      var expires = "";
      var days = 31;
      if (days) {
         var date = new Date();
         date.setTime(date.getTime() + (days*24*60*60*1000));
         expires = "; expires=" + date.toUTCString();
      }
      document.cookie = "weegreename=" + (this.username || "")  + expires + "; path=/";

    }
  },
   mounted(){
      this.isPlaying = true;
      this.getCookieInfo();
      if (this.username) this.currentSound = this.$refs.audio2;
      else this.currentSound = this.$refs.audio1;
      this.currentSound.play();
   }
}
</script>

Теперь на каждой подстранице я хотел бы получить доступ к методу getCookieInfo() для проверки идентификатора имени пользователя.

Я пытался добавить это вВ главном разделе сценария App.vue в файле main.js 

new Vue({
  router,
  render: h => h(App),
  methods: {
    //here the getCookieInfo code from above
  }
}).$mount('#app')

был создан новый компонент с методами, а затем попытался получить к ним доступ в главном приложении через componentname.method, как показано ниже. 

import CookieComponent from '@/components/CookieComponent.vue'

export default {
   // prop:{
   //    isToggled: Boolean
   // },
     components: {
       MenuComponent,
       CookieComponent
     },
   data() {
      return{
         isToggled: false
      }
   },
   methods:{
      clickToggle() {
         this.isToggled = !this.isToggled;
      },

   },
   mounted(){
      CookieComponent.getCookieInfo();
   }
}

Я не знаю сейчас лучший подход, и я узнаю больше в будущем, но этот проект чувствителен ко времени - я решил изучить vue, сделав простой сайт дляу клиента:)

Ответы [ 2 ]

0 голосов
/ 01 июня 2018

Для такого рода вещей лучше всего использовать состояние .Это сохранит данные вашего приложения и позволит вам получить к ним доступ по всем компонентам / страницам.

Вы можете увидеть простое управление состояниями в Vue doc или напрямую использовать VueX , официальная библиотека управления состоянием для Vue.

Подводя итог, как это работает (с VueX):

  • Вы создаете cookieStore: 
// Where data will be saved
const state = { cookie: {} }

// Getters allow you to access data
const getters = { cookie: state => state.cookie }

// Mutations allow you to modify the state
const mutations = {
  // Set cookie data
  saveCookie (state, cookieData) {
    state.cookie = cookieData
  }
}
  • В вашем HomeComponent вы получите информацию о cookie и сохраните ее в магазине: this.$store.commit('saveCookie', cookieData)
  • Во всех других компонентах вместо получения информации о cookie из cookieВы можете получить доступ к сохраненным данным из магазина и делать с ними все, что хотите: this.$store.getters.cookie
0 голосов
/ 01 июня 2018

Если вам нужно на каждой странице, это может быть помещено в ваш App.vue.Оттуда у вас есть три варианта:

  1. Передача данных в качестве реквизита дочерним компонентам.
  2. Создание шины событий и отправка данных любому компоненту, который в этом нуждается.
  3. Используйте Vuex для хранения данных и доступа к ним из ваших компонентов.

Если вы действительно хотите сохранить данные cookie внутри компонента, вам нужно отправить их в цепочку компонентов.

https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

В зависимости от того, насколько глубока ваша цепочка и сколько у вас родственных компонентов, это может привести к путанице, и в этих случаях Vuex или шина событий может быть лучшей идеей.

Не пытайтесь делать такие вещи, как: 

CookieComponent.getCookieInfo();

Пожалуйста, просмотрите документацию, чтобы увидеть хороший пример того, как осуществлять связь компонентов.

...