[vue]vue-ls vue 本地储存示例

vue-ls 是什么：      一个vue封装的本地储存的方法。。

安装方法：
NPM
npm install vue-ls --save
Yarn
yarn add vue-ls
Bower
bower install vue-ls --save

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
一个简单的示例：

不用废话，直接上代码：
vue引用+调用方法：
import VueLocalStorage from 'vue-ls';

options = {
 namespace: 'vuejs__'
};

Vue.use(VueLocalStorage, options);

//or
//Vue.use(VueLocalStorage);

HTML:

<div>
<a href="https://www.npmjs.com/package/vue-ls">Vue localstorage plugin</a>
</div>
<div id="app">
counter: pw_counter
<div>
<button type="button" @click="increment()">Increment</button>
<button type="button" @click="decrement()">Decrement</button>
</div>
</div>

JS:
Vue.use(VueLocalStorage);
new Vue({
el: '#app',
//绑定视图变量
data: function() {
return {
counter: 0
};
},
//监听视图变量中的变化，并绑定到$ls内
watch: {
counter: function(val) {
this.$ls.set('counter', val)
}
},
//在视图渲染创建后将把$el内的变量重新赋值给data
created: function() {
this.counter = this.$ls.get('counter', 0);
var _this = this;
this.$ls.on('counter', function(val) {
_this.counter = val;
});
},
//用户自定义函数
methods: {
increment: function() {
this.counter++;
},

decrement: function() {
this.counter--;
}
}
});