首页 > 其他 > 详细

Vuex的高级使用及localStorage

时间:2018-06-29 19:52:04      阅读:200      评论:0      收藏:0      [点我收藏+]

将选中的城市保存到localStorege 防止页面刷新改变

技术分享图片

为防止有些用户关闭了localStorage的功能 浏览器会报错,我们用try...catch...

技术分享图片

优化:

   优化代码里的 {{this.$store.state.city}}

Vuex提供了一个api

Import { mapState } from ‘vue’

然后在computed计算属性中 将公用的city映射到计算属性的city

技术分享图片

 

...mapState 里面也可是对象形式

技术分享图片

 

技术分享图片

 

优化2

   this.$store.commit(‘changeCity‘, city)

技术分享图片

引入 import { mapState, mapMutations } from ‘vuex’

技术分享图片

 

技术分享图片

 

Getters

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

技术分享图片

 

技术分享图片

 

 技术分享图片

 

Vuex的高级使用及localStorage

原文:https://www.cnblogs.com/warbj/p/9245056.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!