Vue: Axios和Vuex模块化 的综合应用

Axios和Vuex模块化 的综合应用

第一步: 建一个mock --> json文件用来提供假数据

[public/mock/cartList.json]

[
  {
    "id": 1,
    "name": "巧克力",
    "price": 6,
    "unit": "块",
    "type": ["德芙", "费列罗"]
  },
  {
    "id": 2,
    "name": "牛奶",
    "price": 10,
    "unit": "袋",
    "type": ["伊利", "蒙牛", "金典"]
  }
]

第二步: 在vue文件里面引用并获取mock数据

[src/views/AxiosTest.vue]

<template>
  <div class="AxiosTest">
    <h2>Axios测试</h2>
    <button @click="getCartList">获取列表</button>
    <hr/>
    <!-- 将从后端请求过来的数据, 循环展示到页面 -->
    
    <!-- 第一种表现形式 -->
    <div v-for="item in cartList" :key="item.id">
      {{ item.name }} 丨 {{ item.price }}元/{{ item.unit }}
      <!-- 展示type里面的数据 双层for循环 -->
      <div v-for="(atom, index) in item.type" :key="'a' + index">
        {{ atom }}
      </div>
    </div>
    
	<!-- 第二种表现形式 -->
    <div v-for="item in cartList" :key="item.id">
      <!-- 展示type里面的数据 双层for循环 -->
      <div v-for="(atom, index) in item.type" :key="'a' + index">
        {{ atom }} 丨 {{ item.price }}元/{{ item.unit }}
      </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AxiosTest', // 组件名称
    
  data () {
      return {
          cartList: []
      }
  },
  methods: {
      getCartList () {
          // 请求JSON数据
          axios({
              url: '/mock/cartList.json',
              method: 'get'
          }).then(({ data }) => { // 解构data
              this.cartList = data // 将data解构拿到的数据放进空数据
          })
      }
  }
</script>

第三步: 发起异步

用同步函数的写法去写异步函数, 此时需要在方法前面加 async, 然后在其内的方法体前接 await。

<template>
  <div class="AxiosTest">
    <h2>Axios测试</h2>
    <button @click="getCartList">获取列表</button>
    <hr/>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AxiosTest', // 组件名称
    
  data () {
      return {
          cartList: []
      }
  },
  methods: {
      async getCartList () {
          // 用async & await, 就不需要写.then了~
          const { data: data1 } = await axios({ // 不能同时在一个方法里面写两个一样的常量名, 可以解构赋名
              url: '/mock/cartList.json',
              method: 'get'
          })
          const { data: data2 } = await axios({
        	url: '/mock/drinkList.json',
        	method: 'get'
          })
      }
  }
</script>

[
  {
    "id": 1,
    "name": "可口可乐",
    "price": 3,
    "unit": "瓶"
  },
  {
    "id": 2,
    "name": "康师傅冰红茶",
    "price": 3,
    "unit": "瓶"
  }
]

第四步: 封装axios, 方便之后引用方法

[src/assets/js/httpRequest.js]

import axios from 'axios'
import store from '@/store/index'
import { APIURL } from '@/store/common/constant'

// 把当前时间存在每一次的浏览地址上, 这样可以保证浏览器不会读取缓存地址, 从而使每一次浏览都是属于刷新的
function rebuildUrl (url) {
  return `${APIURL}${url}?t=${Date.now()}`
}

function getAxiosParameter (url, params, type) {
  // 如果 accessToken 是 null, Flag = false
  const flag = !!store.state.common.accessToken // 强制类型转换
  const accessToken = store.state.common.accessToken // Vuex模块化
  let axiosParam = {}
  
  if (flag) {
    // accessToken 存在
    // get 方式
    if (type === 'get') {
      axiosParam = {
        url: rebuildUrl(url),
        method: 'get',
        params,
        headers: {
          Authorization: `Bearer ${accessToken}`
        }
      }
    } else {
    // accessToken 不存在
    // get 方式
    if (type === 'get') {
      axiosParam = {
        url: rebuildUrl(url),
        method: 'get',
        params
      }
    }
  }
  return axiosParam
}
    
// GET 请求
export const httpGet = (url, params) => axios(getAxiosParameter(url, params, 'get'))
  .then(({ data }) => {
    console.log(`httpGet: ${url}`, data)
    return data
  })
  .catch((error) => { // 报错
    console.log(`httpGet: ${url}_ERROR`, error) 
  })

五. Vuex模块化

把后端需要的数据放到vuex模块里面

[src/store/common/common.js]

export default {
  namespaced: true,

  state: { // 数据存放
    clientId: 'c1', // 客户端ID
    clientSecret: 'vY9W55NuXM9hoDlx', // 客户端对称秘钥
    username: sessionStorage.getItem('username'), // 用户名
    userId: sessionStorage.getItem('userId'), // 用户ID
    accessToken: sessionStorage.getItem('accessToken'), // 访问Token
    refreshToken: sessionStorage.getItem('refreshToken') // 刷新Token
  },
  mutations: { // 用于事件触发
    setState (state, payload) {
      state[payload.name] = payload.val
    }
}

然后把vuex模块引入到store里面

[src/store/index.js]

import Vue from 'vue'
import Vuex from 'vuex'
// 引入Vuex模块
import common from '@/store/common/common'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    common
  }
})

最后把store引入到上面的axios里

import store from '@/store/index'

function getAxiosParameter (url, params, type) {
  // 如果 accessToken 是 null, Flag = false
  const flag = !!store.state.common.accessToken // 强制类型转换
  const accessToken = store.state.common.accessToken // Vuex模块化
}