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

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

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

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

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

Answer 1

您正在声明 data 个正在使用 remoteservice.sharedvar 中的值初始化的项目。因为 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">

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

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

Vue js component interaction using shared store pattern with vue-loader

javascript

vue.js

vue-component

vue-loader