vue中使用localstorage来存储页面信息
发布时间：2020-12-17 02:44:17 所属栏目：百科 来源：网络整理
导读：今天小颖在跟着慕课网学习vue，不学不知道，一学吓一跳，学了才发现，我之前知道的只是vue的冰山一角，嘻嘻，今天把小颖跟着慕课网学习的demo，给大家分享下，希望对大家有所帮助嘻嘻。 环境搭建： 参考：vue API 详情： npm install --global vue-cli vue i
|
今天小颖在跟着慕课网学习vue，不学不知道，一学吓一跳，学了才发现，我之前知道的只是vue的冰山一角，嘻嘻，今天把小颖跟着慕课网学习的demo，给大家分享下，希望对大家有所帮助嘻嘻。 环境搭建：参考：vue API 详情：
然后：
npm install 如果你配置了淘宝镜像，也可以用cnpm install
我们就在浏览器看到：
但我们最终要实现：
如何实现如图的效果呢？ 1.将App.vue修改为： 对于初学vue的同学，可能对于watch可能不太熟悉，那就麻烦大家移步到 vue API 或参考下小颖之前写的文章：vue——实例方法 / 数据 2.在与App.vue同级目录下，新建store.js文件： export default {
fetch: function() { return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]') },save: function(items) { window.localStorage.setItem(STORAGE_KEY,window.JSON.stringify(items)) } } 3.在项目中打开cmd窗口，运行：npm run dev,就完成啦嘻嘻。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
