Как обмениваться данными между компонентами, используя глобальные миксины в vuejs?почему он не реагирует? - PullRequest
Новая
       19

Как обмениваться данными между компонентами, используя глобальные миксины в vuejs?почему он не реагирует?

0 голосов
/ 11 апреля 2019

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

Вот код: 

Vue.mixin({
    data: function () {
        return {
            base_url: 'http://test.develop/api/v1/',
            isLoading : false
        }
    }
})

base_url постоянно и работает, но isLoading должно быть реактивным, и оно не работает, когда я изменяю его в одном компоненте и регистрирую в другом, он остается неизменным.

Теперь мой вопрос: какие данные следует использовать в vue mixins? Могут ли миксины использоваться только для совместного использования кода, или данные могут использоваться совместно?

1 Ответ

1 голос
/ 12 апреля 2019

Vuex, вероятно, не будет излишним.Vuex отлично подходит для малых и крупных проектов.Vue mixins не предназначены для сохранения глобального состояния.Mixins являются ООП-эквивалентом extends.Вы в основном наследуете все, что на нем, посредством слияния, причем компонент имеет приоритет.Это просто для общего поведения (методы, данные, жизненный цикл).

Отказ от ответственности : я не могу думать о том, что это принято в сообществе, просто примите это как учебное упражнение.

Но единственный способ сохранить «глобальное состояние» своего рода в миксине - это обернуть его объект инициализации в замыкание и отслеживать информацию в реактивном объекте, например: 

Vue.mixin((()=>{
  let store = Vue.observable({
    isLoading: true
  })

  return {
    computed: {
      isLoading: {
        get(){
          return store.isLoading
        },
        set(val){
          store.isLoading = val
        }
      }
    },
  }
})())

Вот скрипка: https://jsfiddle.net/cuzox/ptsh283w/

Опять же, я не поддерживаю этот метод ?

...