javascript - 使用共享存储模式与 vue-loader 的 Vue js 组件交互

Question

我正在关注 this SO答案实现 sibling 数据共享(通信)。

这是我的 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>

ComponentB.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 中复制 jsfiddle在那个 SO 答案中，但不确定为什么这不起作用。 如果有人需要尝试，这里是 github 存储库:https://github.com/rahulserver/vueshared-vue-loader

那么我哪里做错了，我该如何让它发挥作用？

Answer 1

您正在声明正在使用 remoteservice.sharedvar 中的值初始化的 data 项。因为 sharedvar 是一个简单的值而不是一个对象，所以它们只是一个值的单独副本。

在 fiddle 示例中，hub.state 是一个对象。如果您将它分配给一个变量，然后引用该变量的某个成员，则您引用的是 hub.state 的成员。在它们的每个组件中，它们都执行以下操作:

hubState: hub.state

然后使用

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

与此平行，你应该这样做

sharedvar: remoteservice

然后使用

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

(或更改名称更合理)。诀窍在于您必须使用一个对象。