9 months ago

這就是個小技巧分享,最近在實作小的Vue前端專案,因為只有幾個頁面所以懶得套用Vuex,但還是有跨Component的資料傳遞需求,偷懶之下就決定用 window.object來儲存共同資料。

以下是寫法

<script>
export default {
    data: {
    user: window.user
  },
  created(){
    this.$set(user, "total", window.user.total);
    this.$set(user, "used", window.user.used);
  }
}
</script>

這裡我只用上了兩個window.user的參數 total / used,所以只透過$set綁定這兩個參數,注意因為Vue reactivity特性所以一定要用$set,這樣在debug console中改變參數值View才會一同更新。
如果物件很多屬性就可以iterate綁定即可。

另外筆記一下在SO看到的ejs渲染物件的轉換,此方法會避免xss injection。

function htmlDecode(input) {
  var e = document.createElement('div');
  e.innerHTML = input;
  return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
window.activity = JSON.parse(htmlDecode("<%= JSON.stringify(activity) %>"));

<% if (user) { %>
    window.user = JSON.parse(htmlDecode("<%= JSON.stringify(user) %>"));
<% } %>
← Sequelize - 用法整理與實戰筆記
 
comments powered by Disqus