在Vue 中讓localStorage 支援回應式設計 | vue set localstorage
在許多當紅的網頁前端框架中,都採用了回應式設計(ReactiveDesign),讓狀態變化時自動通知框架來對視圖(View)進行重繪,但通常這麼方便的功能只會支援框架自己提出的state模型上,而這次我們來談談如何在Vue.js中使用localStorage並支援回應式設計吧。Reactivity在Vue.js中,各個元件(Component)中都有一個$data欄位,用以存放回應式的狀態,Vue.js會在狀態內部改變時,通知並重繪視圖。但在一般的情況下,如果不是存放在$data下的狀態是不會被追蹤的,除非我們手動跟Vue.js註冊這個物件,如下範例所示:newVue({el:#app,data:{...
在許多當紅的網頁前端框架中,都採用了回應式設計(Reactive Design),讓狀態變化時自動通知框架來對視圖(View)進行重繪,但通常這麼方便的功能只會支援框架自己提出的 state 模型上,而這次我們來談談如何在 Vue.js 中使用 localStorage 並支援回應式設計吧。
Reactivity在 Vue.js 中,各個元件(Component)中都有一個 $data 欄位,用以存放回應式的狀態,Vue.js 會在狀態內部改變時,通知並重繪視圖。但在一般的情況下,如果不是存放在 $data 下的狀態是不會被追蹤的,除非我們手動跟 Vue.js 註冊這個物件,如下範例所示:
new Vue({ el: #app, data: { foo: 1, }, created() { this.bar = 2 }, methods: { addFoo() { this.foo += 1 }, addBar() { this.bar += 1 }, }, })See the Pen jOWGYYE[1] by David Kuo (@david50407[2]) on CodePen[3].
除非因為我們改變了 this.foo 而觸發更新,否則改變 this.bar 值的時候並不會觸發更新。
那是因為在初始化元件時,Vue 會對定義好的 $data 進行 Hook,讓裡面每個欄位的變化都可以被 Vue 所偵測,而 Vue 其實也有提供 API 讓我們可以自己來實作被 Vue 聽的物件,下面有兩個範例:
// Hook whole object const foobar = Vue.observable({ fb: 3 }) new Vue({ el: #app,...