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;
        }
    }
}

然后，我在 resources/js/components/ 中有两个组件 comp1.vue 和 comp2.vue，它们看起来像这样：

<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 实例上使用 mixin 方法：

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

Vue.mixin(MyMixin);

它将为所有实例应用这个 mixin，无论它们有多深。

Answer 2

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

但我不建议这样做，因为当项目变大时，很难避免名称混淆。最好为每个组件单独制作它们以选择适当的名称。

Laravel & Vuejs mixins : 如何将新值赋予共享变量？

Laravel & Vuejs mixins : how to attribute a new value to shared variable?

mixins

laravel

vue.js

vuejs2