Переопределить данные в vue

Question

Я использую mixin для добавления и переопределения данных VUE. Я могу добавить новые данные, но я не могу переопределить существующие данные. Вот простой код:

var mixin = { 
    data: function() { 
    return { 
     foo: 'boo', 
     test: 'blah' 
    } 
    } 
} 

var vm = new Vue({ 
    el: '#vue-instance', 
    mixins: [mixin], 
    data: function() { 
    return { 
     foo: 'bar' 
    } 
    } 
}); 

Когда я запускаю его, «тест» равно «бла» правильно, но «Foo» по-прежнему равен «бар». Есть ли в любом случае, чтобы mixin переопределял существующие данные vue в дополнение к добавлению новых данных?

Вот скрипка:

https://jsfiddle.net/8v9sfxok/

Answer 1

Как уже упоминалось, mixins не могут переопределять существующие данные. Для этого мне пришлось взять оригинальный компонент и сделать его «базовым» компонентом. Затем используйте параметр «extends» в другом компоненте для переопределения существующих данных.

Answer 2

Один из способов обойти это создать метод в Mixin и ссылаться, что из вашего шаблона:

HTML:

<div id="vue-instance"> 
    <p> 
    {{getFoo()}} 
    </p> 
    <p> 
    {{test}} 
    </p> 
</div> 

JavaScript:

var mixin = { 
    data: function() { 
    return { 
     foo: 'baz', 
     test: 'blah' 
    } 
    }, 
    methods: { 
    getFoo: function() { 
     return 'baz'; 
    } 
    } 
} 

var vm = new Vue({ 
    el: '#vue-instance', 
    mixins: [mixin], 
    data: function() { 
    return { 
     foo: 'bar' 
    } 
    } 
}); 

JSFiddle

Answer 3

От mixins documentations:

Параметры, планирующим значения объектов ... будут объединены в одну объекта. Параметры В компонента будет иметь приоритет, когда есть конфликтующие ключи в этих объектах

(курсив мой).

Если вы хотите другую стратегию слияния, you can define one.