Vue JS組件與Vue-Loader共享存儲模式的交互

Question

我正在遵循這個 SO答案來實現同級-同級數據共享（通信）。

這是我的ComponentA.vue：

<template>
    <input id="ca" type="text" v-model="localvarA" placeholder="localvarA">
    <label>{{localvarA}}</label>
    <div>
        thisdiv
        {{sharedvar}}
    </div>
</template>


<script>
    import remoteservice from '../services/applications'
    export default {
        data: function () {
            return {
                localvarA: 'localvalA',
                sharedvar: remoteservice.sharedvar
            }
        }
    }
</script>

CompoinentB.vue：

<template>
    <input type="text" v-model="localvarB" placeholder="localvarB">
    <label>{{localvarB}}</label>
    <div>
        thisdiv2
        <input type="text" v-model="sharedvar" placeholder="sharedvar">
    </div>

</template>


<script>
    import remoteservice from '../services/applications'
    export default {
        data: function () {
            return {
                localvarB: 'localvalB',
                sharedvar: remoteservice.sharedvar
            }
        }
    }
</script>

這是我的App.vue：

<template>
    <component-a></component-a>
    <component-b></component-b>
</template>


<script>
    import ComponentA from './ComponentA.vue';
    import ComponentB from './ComponentB.vue';
    export default {
        components: {ComponentA,ComponentB},
        data: function () {
            return {
            }
        }
    }
</script>

這是我的application / index.js（共享模塊）：

export default {
    sharedvar: 'sharedval'
};

在上面，共享變量sharedvar在ComponentB中更新時不會在ComponentA中的div中更新其值。

我已經盡力在vue-loader中復制該SO答案中的jsfiddle ，但不確定為什么這不起作用。 如果有人需要嘗試，這里是github倉庫： https : //github.com/rahulserver/vueshared-vue-loader

那么，我在哪里做錯了，如何使它起作用？

Answer 1

您正在聲明要使用remoteservice.sharedvar的值初始化的data項。 因為sharedvar是一個簡單的值而不是對象，所以它們只是一個值的單獨副本。

在小提琴示例中， hub.state是一個對象。 如果將其分配給變量，然后引用該變量的某個成員，則表示引用的是hub.state的成員。 在每個組件中，它們都執行以下操作：

hubState: hub.state

然后使用

<input v-model="hubState.message">

要做到這一點，你應該做

sharedvar: remoteservice

然后使用

 <input type="text" v-model="sharedvar.sharedvar" placeholder="sharedvar.sharedvar">

（或將名稱更改為更明智）。 訣竅是您必須使用一個對象。