之前用的vuex存储数据有个小问题，当我们选择了一个城市，首页显示的也是这个，但是当我们刷新一下页面，又变成默认的城市了，这里可以借助localStorage来存储。
在store/index.js里修改state和mutations
这样已经完成了任务，但是最好添加一个try...catch...，为什么呢？
因为有些浏览器如果用户关闭了存储功能，或者使用了隐身模式，直接使用localstorage会直接抛出异常，代码会整个运行不了了。
分隔一下代码
之前的vuex都是写在同一个文件中store/index.js中，实际上会做进一步的拆分。
这个是拆分出来的state部分：
这个是拆分出来的mutations部分：
原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中还有另外两个核心概念
Getter和Module。
Getter
假如我们想写两个城市，而不是一个。
就是这里，假如想放两个城市。
首先去
store/index.js里写上getters，它接收一个参数state
然后去组件内，用
...mapGetters映射doubleCity，那么上面的this.city要改成this.doubleCity
OK了
那么Getters有什么用呢？
有点类似组件中的computed计算属性的作用。当我们需要根据state里的数据算出一些新的数据时，就可以借助Getters这个工具，来提供新的数据，避免数据的冗余。
Module
什么时候使用它？
当我们遇到一个非常复杂的应用场景，比如说管理后台系统时：经常会有很多公用的数据，在vuex中存储，如果将所有的Mutations都放到mutations.js中，这个文件会渐渐庞大，难以维护，这个时候可以借助module对一个复杂的mutations或actions或state进行拆分。
参考一下官网：
创建
store的时候通过模块来进行store的创建，A模块存储A模块的数据和操作，B模块存放B模块的数据和操作，在创建
Store的时候对各个模块的数据进行一个整合。这样使得我们的代码具备更好的可维护性
