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的數據結構如下：

每一項的數據結構如下：

說明：
splice()方法像數組中添加/刪除項目，然後返回被刪除的項目。
...運算符用於去除參數對象中的所有可遍歷屬性，拷貝到當前對象中。

Demo學習鏈接:vue-eleDemo參考