需求

• mock 数据模块 => 改造合理的 mock server 以及数据请求 => 网络规划

• 状态机-统一网络请求

步骤

Home 页面

• 页面回归更新

  • watcher：$route - getList

• 用 mapAction 存储 getList LoadMore

  • 在 methos 里解构 mapAction 获得 getList LoadMore

• 内嵌页面 - 直接定向了

  • mounted 中初始化

• 获取真实的 list

  • 在 computed 里解构 mapGetter 获得 **list ifReturnMsg routerChange downLoadMore **

  • 根据原来的静态 data 修改

VUEX 页面

actions

• 封装 axios

  • import axios from 'axios'

• mutation 的全局规则适配

  • import * as type from './mutations-types'

• 导出内容

  • 语法

    • commit：同步操作

    • pay：payload，内容

  • 请求新列表

    getList({
        commit
    }, pay) {
        if (pay.kind && pay.flag) {
            let url = '/api/article/list'
            let params = {
                tag: pay.kind
            }
    
            axios.get(url, { params }).then(res => {
                res = res.data
                commit(type.GET_NEWSLIST, {
                    data: res.data,
                    kind: pay.kind
                })
                commit(type.CHANGE_LOADING_STATE, false)
                if (res.return_count) {
                    commit(type.RETURN, true)
                } else {
                    commit(type.RETURN, false)
                }
            })
        }
    },
    

  • 点击加载更多

    loadMore({
        commit
    }, pay) {
        if (pay.kind && pay.flag) {
            commit(type.PULLDOWNBTN, false)
            let url = '/api/article/list'
            let params = {
                tag: pay.kind
            }
    
            axios.get(url, { params }).then(res => {
                res = res.data
                commit(type.GET_NEWSLIST, {
                    data: res.data,
                    kind: pay.kind
                })
            })
        }
    }
    

mutations-type - 映射

export const GET_NEWSLIST = 'GET_NEWSLIST'

export const ROUTERCHANGE = 'ROUTERCHANGE'

export const PULLDOWNBTN = 'PULLDOWNBTN'

export const CHANGE_LOADING_STATE = 'CHANGE_LOADING_STATE'

export const RETURN = 'RETURN'

mutations

• 同步操作

import * as type from './mutations-types'

export default {
    // 获取列表
    [type.GET_NEWSLIST](state, payload) {
        // 对于数据进一步操作
        for(let item in payload.data) {
            state.list[payload.kind].push(payload.data[item])
        }
        state.downLoadMore = true
    },
    [type.RETURN](state, flag) {
        state.ifReturnMsg = flag
    },
    [type.ROUTERCHANGE](state, sign) {
        state.routerChange = sign
    },
    [type.PULLDOWNBTN](state, sign) {
        state.downLoadMore = sign
    },
    [type.CHANGE_LOADING_STATE](state, flag) {
        state.loading = flag
    }
}

getters

• 读取数据

• 数据的转化

  • eg. 0 表示在睡觉

export default {
    newsList: state => state.newsList,

    list: state => state.list,

    ifReturnMsg: state => state.ifReturnMsg,

    routerChange: state => state.routerChange,

    downLoadMore: state => state.downLoadMore
}

index

• 本地化维护的状态

import Vue from 'vue'
import Vuex from 'vuex'

import mutations from './mutations'
import actions from './actions'
import getters from './getters'

Vue.use(Vuex);

// 本地化维护的状态
const state = {
    ifReturnMsg: true,
    downLoadMore: true,
    routerChange: true,
    list: {
        __all__: [],
        news_hot: [],
        news_society: []
    }
}

export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

本地服务器

用 express 启动服务器

• server.js

const express = require('express')
const app = express()

let Mock = require('mockjs')

// 写接口
let listApi = require('./data/list')
app.get('/api/article/list', function(req, res) {
    res.json(
        Mock.mock(
            listApi.getList(req)
        )
    )
})

app.listen(3000)

跨域

• 修改webpack

• vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        secure: false
      }
    }
  }
})