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--;
}
}
});

发布了522 篇原创文章 · 获赞 1226 · 访问量 469万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: Age of Ai 设计师: meimeiellie

分享到微信朋友圈

×

扫一扫,手机浏览