Миксины Laravel & Vuejs: как приписать новое значение разделяемой переменной? - PullRequest
Новая
       15

Миксины Laravel & Vuejs: как приписать новое значение разделяемой переменной?

0 голосов
/ 30 марта 2019

Я могу использовать переменные mixin test и метод changeTest, когда, когда я приписываю новое значение переменной test, оно применяется только в одном компоненте.Как его изменить глобально на всех компонентах, использующих его?

Мои миксины установлены в файле resources/js/mixins.js: 

export default {
    data() {
        return {
            test: 'foo',
        };
    },
    methods: {
        changeTest(v) {
            this.test = v;
        }
    }
}

Тогда у меня есть мойдва компонента comp1.vue и comp2.vue в resources/js/components/, оба выглядят так: 

<template>
  <div>
    {{ test }}
  </div>
</template>

<script>
import myMixins from '../mixins'
export default {
  mixins: [ myMixins ],
}
</script>

Оба компонента в моем home.blade.php выглядят так: 

@extends('layouts.app')

@section('content')

<comp1></comp1>
<comp2></comp2>

@ensection

Ответы [ 2 ]

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

для создания общей переменной (состояния) между всеми экземплярами в vue.js, вы можете использовать vuex. это так просто, просто добавьте vuex в ваши пакеты и создайте такой экземпляр: 

import Vuex from 'vuex'

const store = new Vuex.Store({
    state: {
        test: 'foo',
    },
    mutations: {
        setTest(state, payload) {
            state.test = payload
        }
    },
});

теперь вам нужно добавить этот магазин в ваш основной экземпляр vue: 

import Vue from 'vue'

Vue.use(Vuex);

let vm = new Vue({
    el: '#app',
    store,
    // ...
});

все готово. теперь в каждом компоненте вы можете получить доступ к состояниям с помощью this.$store.state. для облегчения жизни вы можете определить вычисляемую переменную следующим образом: 

computed: {
    test() {
        return this.$store.state.test
    }
}

чтобы изменить состояние, вам просто нужно зафиксировать мутацию setTest. Вы должны добавить эту мутацию в методы и просто вызвать ее так: 

methods: {
    ...Vuex.mapMutations(['setTest']),
    myMethod() {
        // do this

        this.setTest('some value');

        // do that
    }
}

вы также можете создать глобальный миксин, как я уже говорил, чтобы добавить это вычисление и мутацию к каждому экземпляру, подобному следующему: (добавьте это перед созданием основного экземпляра vue) 

Vue.mixin({
    computed: {
        test() {
            return this.$store.state.test
        }
    },
    methods: {
        ...Vuex.mapMutations(['setTest']),
    }
});

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

0 голосов
/ 30 марта 2019

вы можете использовать метод mixin в основном экземпляре Vue следующим образом: 

import Vue from 'vue'
import MyMixin from './mixins.js'

Vue.mixin(MyMixin);

Он будет применять этот mixin для всех экземпляров, независимо от их глубины.

...