vuelsvue本地储存示例-即速应用

vuelsvue本地储存示例

浏览量：403 时间：2019-12-20 来源：zhangdaiscott

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