49-VUE-6

vue现在看下来，几乎没有不懂地方，看来，如果时间充裕，1星期学习后写vue是没问题

• 昨天在ajax.js里面把ajax的基本的get，post给封装了，现在要写index.js，也就是请求接口的js

• 对外暴露多个函数，这里写export function(){}，这样写是没问题的。。但是现在换成箭头函数了

• export const reqAdress = (geohash) => ajax(‘/postion/${geohash}’)，这里传的并不是 ?param1=xxx&param2=xxx，怎么都是/，

• 第一个传的接口没看懂，之后的都是正常操作写接口，之后的按照这样写完就可以了

• 一般发请求，我们在mounted里面发，然后这里是异步请求，然后调用的方法前面加await

• 在js里面，都是通过占位符$这种，把值传进来

• 跨域请求受限，在客户端这里的解决方案是，打开index.js里面的proxyTable的注释

• vuex-->在这里要创建一个总体的js：index.js，然后是state.js，mutations.js，actions.js，getters.js，mutation-types.js

• 把mutaions.js ，state.js，actions.js，getters.js这四个js，全部引入到index.js里面来

• export default new Vuex.store( {state，mutations，actions，getters } )

• 声明使用，因为vuex是插件，所以必须要声明使用，Vue.use(Vuex)

• 这里在state.js里面声明了一些属性值

• 这里在api/index.js下面又写了几个接口：reqFoodCategorys = () => ajax( BASE_URL + '/index_category' )

• 在mutations-types里面声明一些常量，比如：export const RECEIVE_ADDRESS = 'receive_address'

• 接着在mutations.js里面import了mutations-type里面的常量，然后写了很多方法，这里注意一下，所有的写在mutations.js里面的方法都是同步方法，并且之前在mutations-types里面写的就是方法名：比如这样-->[RECEIVE_CATEGORYS]（state，{address}）{ state.address = address }，实际传参是传一个address，然后state是配置在vuex里面的全局变量，然后这里的意思就是外部传来一个address赋值给state的address属性

• 在actions.js里面import了muations-type的方法名，并且import了ap/index.js里面的接口名

• 这里相当于，把请求接口。。。又改造成了一个方法，这个方法写在了action.js里面，然后在这个方法里面，调接口方法，并且提交一个mutation，同时，这个方法名前要加async，req开头的接口方法前加await，然后这个请求返回的结果，用commit的方式，commit（[mutation-type的方法名]，data），通过这样的方式，传给vuex的state.js

• 之前这个demo，在这个项目载入项目之前mounted（）在项目开始的时候，就不写api方法了，而是在$store调用action方法，这里用的是dispatch，dispatch和commit的区别就是，dispatch可以执行异步的方法，而commit是只能执行同步的，this.$store.dispatch( '方法名' ，参数 )

• 运行前还是要把store给import到main.js中且注册到vue实例对象的属性中

• mapActions的意思是：把vuex里面的函数映射到methods里面来，这样就不用使用$store.dispatch了，而是直接this.方法名了

• mapState思想跟mapActions一样，把state里面的属性映射到局部域中，就可以拿到state的的属性了，但是这里是不能修改的，只能读，不能写，写只能用action调mutations或者mutations直接改，不然会报错

• 同样，mapMutations一样，也是把vuex的方法，写到methods里面，这样就可以用this调用mutations方法了

• 把通过调category拿到的category数组，用v-for显示到首页

• $nextTick-->这里是这样的一个逻辑，用watch来监听data的变化，当有data发送变化的时候，这个时候如果直接更新UI，会有问题，应该在下一轮DOM变化前，调用这个方法，来实现UI的正确显示，常用方法

• computed-->你的data里面会有一些数据，你可以对这些数据，进行数据提取，什么意思呢，就是，如果你实际代码里面需要一些"间接数据"，你在computed里面可以计算，直接生成一个间接数据，然后供给使用即可

• 之前在Msite里面请求了轮播数据category，然后请求商家数据

• svg是矢量图形，与png和jpg不一样，可以无限缩放而且不影响图片质量，在这里用作了未加载图片时的提示界面

• star组件，在这里是作为一个component创建，根据算法，v-for星星图标，很简单

备注：之后改写jsp的时候，如果vue与layui之类的有冲突，那么直接用vue重写，不要再使用layui了，尽量找一些线程的后台管理系统的模板来进行二次开发才是聪明选择

补充一下，后续没有什么技术了，今天开始正式改造jsp