vuex 封装请求

195 阅读 0 评论 129 点赞

我是靠谱客的博主可靠朋友，这篇文章主要介绍vuex 封装请求，现在分享给大家，希望可以做个参考。

因为我这里对store进行了抽离所以有提取的方法有点不一样;其他都是一样的

如果看不懂抽离;可以查看这篇文章

https://blog.csdn.net/qq_40190624/article/details/100087775

vuex中的数据

departmentCategory.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// 请求部门分类列表
import axios from 'axios'
const state = {
  categoryList: {}
}
const getters = {
  updateCategoryList: (state) => {
    return state.categoryList
  }
}
const mutations = {
  setCategoryList(state, data) {
    state.categoryList = data
  }

}
const actions = {
  // 部门分类
  SETCATEGORYLIST: ({
    commit
  }, info) => {
    return new Promise((resolve, reject) => {
      axios.get('apis/api/SysDepartment/GetList')
        .then((res) => {
          commit('setCategoryList', res.data)
          resolve(res)
        }).catch(err => {
          reject(err)
        })
    })
  },

}

export default {
  namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
  state,
  getters,
  mutations,
  actions
}

store.js引入

1
2
3
4
5
6
7
8
9
10
11
12
13
import Vue from 'vue'
import Vuex from 'vuex'
import base from './base'
import departmentCategory from './sysDepartmentCategory'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    base,
    departmentCategory
  }
})

页面使用:

1
2
3
4
5
6
7
8
9
10
11
12
//可以一开始加载  
 created() {
    this.$store.dispatch("departmentCategory/SETCATEGORYLIST").then(res => {
      console.log(res);
    });
   
  }
};
//如果有直接用到页面上的也可以在计算属性中用
 computed: {
    // ...mapGetters(["departmentCategory/updateCategoryList"])
  },