Question

我正在关注this回答以实现兄弟姐妹的数据共享（通信）。

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

在上面，在ComponentB中更新时共享变量sharedvar不会在ComponentA中更新div中的值。

我已经尽力在vue-loader中复制那个SO答案中的jsfiddle，但不确定为什么这不起作用。如果有人需要尝试这个，那么这是github回购：https://github.com/rahulserver/vueshared-vue-loader

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

Answer 1

您声明使用data中的值初始化的remoteservice.sharedvar项。由于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">

（或更改名称更合理）。诀窍是你必须使用一个对象。

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

1 个答案: