美文网首页VUE
【Vue20】Vuex的高级使用及localStorage

【Vue20】Vuex的高级使用及localStorage

作者: 八宝君 | 来源:发表于2018-05-28 20:37 被阅读0次

之前用的vuex存储数据有个小问题,当我们选择了一个城市,首页显示的也是这个,但是当我们刷新一下页面,又变成默认的城市了,这里可以借助localStorage来存储。
store/index.js里修改statemutations

记得修改

这样已经完成了任务,但是最好添加一个try...catch...,为什么呢?
因为有些浏览器如果用户关闭了存储功能,或者使用了隐身模式,直接使用localstorage会直接抛出异常,代码会整个运行不了了。

增加try...catch

分隔一下代码

之前的vuex都是写在同一个文件中store/index.js中,实际上会做进一步的拆分。

目录

这个是拆分出来的state部分:


state.js

这个是拆分出来的mutations部分:


mutations.js

store/index.js这样写

store/index.js
记得引入刚刚创建的两个js文件:import state from './state
然后在vuex.store里面写上state, mutations

vuex中的高级api

...mapState

之前我们使用公用数据里的city时,需要写这么一长串this.$store.state.city

很长一串
Vuex里面提供了一个比较高级的api,我们可以这样写:
写在计算属性里
意思是,mapState是指通过...这个扩展运算符将vuex中的数据映射到组件的computed里,这里是将this.$store.state.city这个公用数据映射到名字叫做city的计算属性中,上面也不用那么麻烦了,直接this.city就行了。 另一种写法
...mapState内除了是个数组,还可以是个对象,这张图的意思是,将city这个公用数据,映射到当前组件的计算属性中,名字叫做currentCity,上面的使用就变成了
注意名字

...mapMutations

对于mutations也有这样的简便写法
之前我们写的是this.$store.commit('changeCity', city) 直接调用mutations,现在改写成这样:

一句改成两个
先在methods里写
...mapMutations(['changeCity'])  定义一个叫做changeCity的mutation

然后再去之前的地方调用这个mutation,将city传进去就行了。

this.changeCity(city)

别忘了引入...mapMutations

引入它

翻译一波:
有一个mutation叫做changeCity,然后将它映射到当前组件名字叫做changeCity的方法里,那么要调这个mutation就没必要那么麻烦的写了,直接调用这个方法,传入需要给的参数就行。

还有其他的核心概念

vuex中还有另外两个核心概念

vuex官网
GetterModule

Getter

假如我们想写两个城市,而不是一个。

这里
就是这里,假如想放两个城市。
首先去store/index.js里写上getters,它接收一个参数state
写getters
然后去组件内,用...mapGetters映射doubleCity,那么上面的this.city要改成this.doubleCity
改写代码
OK了
结果出来了

那么Getters有什么用呢?
有点类似组件中的computed计算属性的作用。当我们需要根据state里的数据算出一些新的数据时,就可以借助Getters这个工具,来提供新的数据,避免数据的冗余。

Module

什么时候使用它?
当我们遇到一个非常复杂的应用场景,比如说管理后台系统时:经常会有很多公用的数据,在vuex中存储,如果将所有的Mutations都放到mutations.js中,这个文件会渐渐庞大,难以维护,这个时候可以借助module对一个复杂的mutationsactionsstate进行拆分。

参考一下官网:

官网的图片
创建store的时候通过模块来进行store的创建,
A模块存储A模块的数据和操作,B模块存放B模块的数据和操作,在创建Store的时候对各个模块的数据进行一个整合。
这样使得我们的代码具备更好的可维护性

相关文章

网友评论

    本文标题:【Vue20】Vuex的高级使用及localStorage

    本文链接:https://www.haomeiwen.com/subject/znzgjftx.html