Vue学习笔记-项目开发3.11Vuex的高级应用及localStore应用

一、localStorage本地存储

       1、当我们在实际应用场景中，选择一个城市之后，当下次进入到页面时显示的应该是上次选择的城市，如果写成默认的，每次刷新页面后会变成默认值，所以此时增加进localStorage的概念（H5中提供类似cookie的功能）
在store的index.js中直接使用localStorage即可，不需要引入其他包

       2、当我们在使用localStorage的时候，如果用户关闭的了本地存储，或者本地存储不能使用的话，直接使用的话，就会报错，导致页面不能直接使用，所以此时需要增加try…catch来捕获这种异常 《代码中存在一个错误，catch后要跟一个空格》

       3、代码项目化：单独分离出state和mutations的使得代码更加符合项目开发，且维护性更高

       3A、代码优化：当我们选择的城市名称过长时会将内容向下扩充，将代码修改成图中内容，设置最小宽度和定位间距

二、vuex的高级使用

       1、mapState的使用
        ①mapState可以传数组

        ②mapState可以传对象

       2、mapMutations的使用（List和search均需要修改）

       【注】…mapState和…mapMutations可以简化之前vuex的仓库的操作流程，不需要写复杂的commit等触发函数

       3、getters的使用：如果需要计算得到一些数据时可以使用，这样可以解决数据的冗余


       3A、对于有多个模块时，就需要建立多个state和mutations，这事就需要引入vuex的模块功能，单独建立属于自己的模块