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

Question

我可以使用mixin变量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中的所有实例之间建立公共变量（state），您可以使用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
    }
}

你也可以像我之前告诉你的那样创建一个全局mixin，将这个计算和变异添加到每个像这样的实例:(在生成主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);

它将适用于所有实例，无论它们有多深。