Question

我可以使用混合变量test和方法changeTest，当我将新值赋予变量test时，它仅应用于一个组件。如何在使用它的所有组件上全局进行更改？

我的mixins设置在文件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

Answer 1

用于在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']),
    }
});

但是我不建议这样做，因为当项目规模变大时，避免名称混淆变得非常困难。最好分别为每个组件分别选择合适的名称。

Answer 2

您可以像这样在主Vue实例上使用mixin方法：

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

Vue.mixin(MyMixin);

无论深度有多深，它将在所有实例中应用此混合。

Laravel＆Vuejs mixins：如何将新值归因于共享变量？

2 个答案: