码迷,mamicode.com
首页 > 其他好文 > 详细

Vuex的高级使用及localStorage

时间:2018-06-29 19:55:28      阅读:1112      评论:0      收藏:0      [点我收藏+]

标签:his   计算属性   .com   引入   family   vue   reg   属性   根据   

将选中的城市保存到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

标签:his   计算属性   .com   引入   family   vue   reg   属性   根据   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!