api、vuex、component/views/pages打配合

姜来前端程序媛

已于 2023-06-25 16:55:01 修改

阅读量108

点赞数

文章标签： java 数学建模开发语言

于 2023-06-25 16:54:09 首次发布

本文链接：https://blog.csdn.net/weixin_74285634/article/details/131378584

版权

本文展示了在Vue.js应用中如何通过Vuex的actions处理异步API调用，获取服务器数据并存储到Vuex仓库中，然后在组件中通过计算属性展示数据。使用axios的二次封装和proxy解决跨域问题。

摘要由CSDN通过智能技术生成

api管理接口地址
vuex的actions中书写异步，获取服务器数据，存储数据
component / views / pages展示数据

1、api/index.js

proxy方式解决代理跨域链接地址

axios二次封装链接地址

// 引入二次封装的axios
import request from '@/utils/request'

// 接口地址统一管理
export const reqCategory = () => request({ url: '/product/getBaseCategoryList', methods: "get" })

2、views/HomeView.vue js部分

<script>

// 通过vuex提供的辅助函数，获取仓库内部上商品分类数据
import { mapState } from 'vuex';

mounted(){
    // 派发actions
    this.$store.dispatch('getCategory');
},
computed: {
    ...mapState({
      categoryArr: state => state.home.categoryArr
      // state.home.categoryArr: home仓库state中的categoryArr数据
      // 仓库里的数据赋值给了categoryArr，进行界面渲染即可
    })
}

</script>

3、store/modules/home.js 小仓库

vuex仓库配置链接地址

// 1、引入请求函数api
import { reqCategory } from '@/api'

// 小仓库存储数据
const state = {
  // 3、将服务器返回的数据进行存储
  categoryArr: [] // 这里数组的原因是服务器返回的是一个数组
  // categoryArr初始值是一个空数组
}

// 小仓库修改数据
const mutations = {
  GETCATEGORY(state, categoryArr) {
    // 后面这个categoryArr,是getCategory传来的服务器数据result.data
    // 4、给state.categoryArr重新赋值
    state.categoryArr = categoryArr
  }
}

// 小仓库书写逻辑和异步
const actions = {
  // 2、发请求，获取数据
  // context上下文对象进行解构：commit提交mutation、state仓库数据、getters计算属性、dispatch提交actions
  async getCategory({ commit, state, getters, dispatch }) {
    // 因为返回的是一个Promise，所以加await，要成功的结果值
    let result = await reqCategory()
    if (result.code == 200) {
      commit('GETCATEGORY', result.data)
    }
  }
}

// 小仓库计算属性书写
const getters = {

}

// 对外进行暴露
export default {
  state,
  mutations,
  actions,
  getters
}