【Vue20】Vuex的高级使用及localStorage

之前用的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的时候对各个模块的数据进行一个整合。
这样使得我们的代码具备更好的可维护性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,148评论 0 6
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,040评论 3 3
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 1,472评论 0 7
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,686评论 7 61