Vue js組件交互使用共享存儲模式與vue-loader

我正在關注this SO答案以實現兄弟姐妹數據共享（通信）。Vue js組件交互使用共享存儲模式與vue-loader

這裏是我的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>

這裏是我的應用程序/索引.js（共享模塊）：

export default { 
    sharedvar: 'sharedval' 
};

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

我試過最好在vue-loader中複製jsfiddle那樣的答案，但不知道爲什麼這不起作用。這裏是github回購，如果有人需要試試這個：https://github.com/rahulserver/vueshared-vue-loader

所以我在哪裏做錯了，我該如何使它工作？

來源

2017-04-19 rahulserver

我有類似的問題檢查它是否可以改變這兩個組件'sharedvar：remoteservice.sharedvar'這個'sharedvar：remoteservice'.然後在componentB分配V型模型輸入像這樣'sharedvar.sharedvar' - 我認爲這應該起作用 –

您聲明的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">

（或更改名稱更多明智的）。訣竅是你必須使用一個對象。

來源

2017-04-19 14:53:39

感謝您澄清。這真的有用！ – rahulserver

Vue js組件交互使用共享存儲模式與vue-loader

回答

相關問題