https://github.com/ropbla9/vue-reactive-storage

Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.
https://github.com/ropbla9/vue-reactive-storage

Last synced: 3 months ago
JSON representation

Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.

• Host: GitHub
• URL: https://github.com/ropbla9/vue-reactive-storage
• Owner: ropbla9
• Created: 2016-10-05T18:48:00.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-06-14T00:57:03.000Z (over 6 years ago)
• Last Synced: 2024-10-22T01:55:04.224Z (3 months ago)
• Language: JavaScript
• Size: 43.9 KB
• Stars: 126
• Watchers: 2
• Forks: 12
• Open Issues: 5
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-github-vue - vue-reactive-storage - vue插件的Reactive层 (实用库)
• awesome-github-vue - vue-reactive-storage - vue插件的Reactive层 (实用库)
• awesome - vue-reactive-storage - vue插件的Reactive层 (实用库)
• awesome-vue - vue-reactive-storage - reactive-storage?style=social) - vue插件的Reactive层 (实用库)

README

        
# vue-reactive-storage

Reactive layer for interacting with localStorage from Vue. Plugin for Vue 2.

### install

`npm install --save https://github.com/ropbla9/vue-reactive-storage`

* This package is not on NPM, use GitHub source only.

### why

`window.localStorage` cannot be reactive if you use it directly with Vue, ex

```js

new Vue({

    data {

      localStorage: window.localStorage

    },

    template: " 
 {{localStorage.notes}}, {{localStorage.lang}} ... 
 ",

    created: function() {

        this.localStorage.lang = "other value";

    }

})

```


Code above will not react, even bind to view. So...

### how to use

```js

import reactiveStorage from "vue-reactive-storage";

// Set initial values

Vue.use(reactiveStorage, {

    "notes": 'foo',

    "lang": 'foo',

    "name": 'foo',

    "count": 1,

    "userConfig": {age: 10, name: 'fred'}

});

```

Define vars that will be stored and proxied by `Vue` (any other var in `window.localStorage` that is not on this array will not be proxied).

Now you can acess the namespace localStorage in Vue.

```js

new Vue({

    template: " 
 {{localStorage.notes}}, {{localStorage.lang}} ... 
 ",

    created: function() {

        this.localStorage.lang = "other value"; // will react on the view and on real localStorage.

    }

})

```