这篇文章主要介绍了vue中使用localstorage来存储页面信息,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
今天小颖在跟着慕课网学习vue,不学不知道,一学吓一跳,学了才发现,我之前知道的只是vue的冰山一角,嘻嘻,今天把小颖跟着慕课网学习的demo,给大家分享下,希望对大家有所帮助嘻嘻。
环境搭建:
参考:vue API
详情:
npm install --global vue-cli
vue init webpack vue-project
然后:
cd vue-project
npm install 如果你配置了淘宝镜像,也可以用cnpm install
npm run dev
我们就在浏览器看到:
但我们最终要实现:
如何实现如图的效果呢?
1.将App.vue修改为:
- {{its.name}}
对于初学vue的同学,可能对于watch可能不太熟悉,那就麻烦大家移步到 vue API 或参考下小颖之前写的文章:vue――实例方法 / 数据
2.在与App.vue同级目录下,新建store.js文件:
const STORAGE_KEY = 'todos-vuejs' 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,就完成啦嘻嘻。
以上就是vue中使用localstorage来存储页面信息的详细内容,更多请关注0133技术站其它相关文章!