vue2-elm学习记录（Day3）

知识点

一、Vuex

Vuex中store数据改变的唯一方法就是mutation,通俗理解mutation，里面装着一些改变数据方法的集合，把处理数据逻辑的方法全部放在mutation里面，使得数据和视图分离。
mutation结构：
每一个mutation都有一个字符串类型的事件类型(type)和回调函数(handler),
也可以理解为{type:handler()},先注册事件，当触发响应类型的时候调用handker(),调用type的时候需要用到store.commit方法。
载荷(payload):
简单理解就是往handler(stage)中传参handler(stage,pryload):一般是个对象。
mutation-types:将常量放在单独的文件中

//mutation-types.js
export const SOME_MUTATION='SOME_MUTATION'
//store.js
import Vuex from 'vuex'
import {SOME_MUTATION} from './mutation-types'
export store=new Vuex.Store({
    state:{...},
    mutations:{
        //可以使用ES2015风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION](state){
            //mutate state
        }
    }
});

commit:
提交可以在组件中使用this.$store.commit('xxx')提交mutation,或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用

import {mapMutation} from 'vuex'
export default{
    methods:{
        ...mapMutations([
            'increment'
            //映射this.increment()为this.$store.commit('increment')
        ])
        ...mapMutations([
            add:'increment'
            //映射this.add()为this.$store.commit('increment')
        ])
    
    }

}

eg:

商铺列表页的标题展示：
默认展示为"请选择地址..."，获取到具体的位置信息后展示具体的位置。
需要对当前的坐标进行保存，对获取到具体的位置信息进行记录。
首先：
mutation-types.js中定义常量

//保存geohash坐标信息
export const SAVE_GEOHASH='SAVE_GEOHASH'
//记录具体的地址信息
export const RECORD_ADDRESS='RECORD_ADDRESS'

第二步：
mutations.js中引入常量，定义处理保存，记录的两个方法

import {SAVE_GEOHASH,RECORD_ADDRESS} from './mutation-types.js'
export default{
    //保存geohash,传入的参数是geohash坐标信息
    [SAVE_GEOHASH](state,geohash){
        state.geohash=geohash;
    }
    //记录当前具体的位置信息,传入的参数是经纬度信息
    [RECORD_ADDRESS](state,{
        latitude,
        longitude
    }){
        state.latitude=latitude;
        state.longitude=longitude;
    }
}

第三步：
store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
Vue.use(Vuex)
const state={
    //地址geohash值
    geohash:'31.22299,121.36025'
}
export default new Vuex.Store({
    state,
    mutations
})

第四步：
msite.vue中的使用：

import {mapMutations} from 'vuex'
import {cityGuess,msiteAddress} from "../../service/getData";
export default{
    data(){
        return {
            //city.vue页面传递过来的地址geohash
            geohash:"",
            //msite页面头部标题
            msiteTitle:"请选择地址..."
        }
    
    },
    //被挂载之前执行
    async beforeMount(){
        //首先判断geohash位置信息有没传递过来
        if(!this.$route.query.geohash){
            //若没有传递过来，需要请求cityGuess方法，来获取当前的城市信息
            const address=await cityGuess();
            this.geohash=address.latitude+','+address.longitude;
        }
        else{
            //若geohash信息通过路由传递过来了，那么
            this.geohash=this.$route.query.geohash;
        }
        //将geohash信息进行保存
        this.SAVE_GEOHASH(this.geohash);
        //根据geohash(城市坐标)获取具体位置信息
        //调用msiteAddress请求方法，传入参数城市的坐标信息this.geohash
        let res=await msiteAddress(this.geohash);
        //给标题重新赋值
        this.msiteTitle=res.name;
        //将地址信息进行记录
        this.RECORD_ADDRESS(res);
    },
    methods:{
        //引入store中定义的方法
        ...mapMutations(["RECORD_ADDRESS","SAVE_GEOHASH"])
    }
}

打印出来的res信息如下：

二、vue中使用swiper

在vue中使用轮播组件：
通过npm安装插件：
npm install swiper --save-dev
在需要使用swiper的组件里引入swiper,swiper的初始化放在mounted里：

遇到的问题：

问题原因：新的webpack已经不允许import和module.exports共存
更换成最新版的swiper.mim.js报错为：

检测发现是引入swiper.js导致的问题，swiper解析错误（放在了src中），

解决办法：

在src同级目录下，新建assets目录，放入swiper.min.js,然后再需要用到的地方重新
引用就可以了。
ps:疑惑的是原始Demo链接的是src目录下的swiper,但是是没有任何报错信息的，是因为版本不同还是什么原因暂时没找到，若有小伙伴明白怎么回事，可以私信我下~ ~
eg:
实现效果：

展示商品分类列表，可滑动。
（1）拿到所有的食品分类信息
（2）将请求到的食品分类信息，按照一屏（一个slide）排列8个，进行循环，即可拿到swiper的分页信息
（3）二次循环，将每个slide里的数据循环，拿到其对应的图片地址/名称信息
template部分：

<nav class="msite_nav">
    <!--拿到的分类列表不为空时展示-->
    <div class="swiper-container" v-if="foodTypes.length">
        <div class="swiper-wrapper">
            <!--第一次循环，循环可知一共分了几页-->
            <div class="swiper-slide food_types_container"
                v-for="(item,index) in foodTypes" :key="index">
                <!--第二次循环，循环展示具体的信息-->
                <router-link :to="{path:'/food'}" 
                    v-for="foodItem in item"
                    :key="foodItem.id" class="link_to_food">
                    <figure>
                        <img :src="imgBaseUrl+foodItem.image_url" />
                        <figcaption>{{foodItem.title}}</figcaption>
                    </figure>
                </router-link>
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</nav>

Js部分：

//获取食品分类列表的方法
import {msiteFoodTypes} from '@/service/getData';
import Swiper from "../../../assets/js/swiper.min.js";
import "../../../assets/css/swiper.min.css";
export default{
    data(){
        //食品分类列表
        foodTypes:[],
        //图片域名地址：
        imgBaseUrl:"https://fuss10.elemecdn.com"
    },
    /*由于dom渲染完成才能初始化Swiper,所以必须将初始化放入vue的生命周期钩子函数mounted中*/
    mounted(){
        //传入参数geohash
        msiteFoodTypes(this.geohash).then(res=>{
            let resLength=res.length;
            //返回一个新数组
            let resArr=[...res];
            let foodArr=[];
            //第一次循环,resLength/8可以拿到总的分页数
            for(let i=0,j=0;i<resLength;i+=8,j++){
                foodArr[j]=resArr.splice(0,8);
                /*
                   i=0,j=0
                   foodArr[0],存入resArr的前8个
                   i=8,j=1
                   foodArr[1],存入resArr的下8个
                   i=16,j=2,i<resLength,跳出循环
                
                */
            }
            this.foodTypes=foodArr;
            
        }).then(()=>{
            //初始化swiper
            new Swiper(".swiper-container",{
                pagination:{
                    el:'.swiper-pagination'
                },
                loop:true
            })
        
        })
    
    }

}

ps:
返回的res的数据结构如下：

resArr的数据结构如下：

foodTypes、foodArr的数据结构如下：