vuex发送axios请求

版本vue3.0

需求：（管理系统类头部消息数量（A页面）--在B页面每次新增一条数据消息数量随之改变）

思路：将消息数量axios请求放到vuex状态管理工具中这样可以多个页面调用这个axios请求，通过computed计算属性监听到数据发生变化来实现。由于本项目vuex是分模块的所以此方法适用于vuex分模块的项目，之前在百度都是不分模块的所以踩了坑就索性看项目中别人怎么写的照着写了

 

 

 

 在/score/modules下新建一个message.js

import { fetchUnReadNoticeNum,activeList } from '@/api/message/notice'
//引入封装装的axios
import { fetchUnReadNewsNum } from '@/api/message/news'
import { fetchUnReadTodoNum } from '@/api/message/todo'

const message = {
  namespaced: true,
  state: {
    unReadNoticeNum: 0,
    unReadNewsNum: 0,
    unReadTodoNum: 0,
    numContent:0// 消息总数量
  },
  getters: {
    unReadCount: state => {
      return state.unReadNoticeNum + state.unReadNewsNum + state.unReadTodoNum
    }
  },
  mutations: {
    SET_UNREADNOTICENUM: (state, unRead) => {
      state.unReadNoticeNum = unRead
    },
    // 消息总数量
    SET_NUMCONTENT: (state, unRead) => {
      state.numContent = unRead
    },
    SET_UNREADNEWSNUM: (state, unRead) => {
      state.unReadNewsNum = unRead
    },
    SET_UNREADTODONUM: (state, unRead) => {
      state.unReadTodoNum = unRead
    },
    SET_READ: (state, data) => {
      let x = null
      switch (data.type) {
        case 'notice':
          x = state.unReadNoticeNum - data.num
          state.unReadNoticeNum = x >= 0 ? x : 0
          break
        case 'news':
          x =  state.unReadNewsNum - data.num
          state.unReadNewsNum = x >= 0 ? x : 0
          break
        case 'todo':
          x =  state.unReadTodoNum - data.num
          state.unReadTodoNum = x >= 0 ? x : 0
          break
      }
    },
    SET_UNREAD: (state, type) => {
      switch (type) {
        case 'notice':
          state.unReadNoticeNum++
          break
        case 'news':
          state.unReadNewsNum++
          break
        case 'todo':
          state.unReadTodoNum++
          break
      }
    }
  },
  actions: {
    getUnReadNoticeNum ({commit}) {
      return new Promise((resolve, reject) => {
        fetchUnReadNoticeNum().then(res => {
          const data = res.data.data
          commit('SET_UNREADNOTICENUM', data)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    // 消息总数量
    getnumContent ({commit}) {
      return new Promise((resolve, reject) => {
        activeList({status: 'active',current: 1,size: 10}).then(res => {
          const data = res.data.data.total
          console.log('data',data)
          commit('SET_NUMCONTENT', data)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    getUnReadNewsNum ({commit}) {
      return new Promise((resolve, reject) => {
        fetchUnReadNewsNum().then(res => {
          const data = res.data.data
          commit('SET_UNREADNEWSNUM', data)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    getUnReadTodoNum ({commit}) {
      return new Promise((resolve, reject) => {
        fetchUnReadTodoNum().then(res => {
          const data = res.data.data
          commit('SET_UNREADTODONUM', data)
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    },
    handleRead ({commit}, data) {
      commit('SET_READ', data)
    },
    addUnRead ({commit}, type) {
      commit('SET_UNREAD', type)
    }
  }
}

export default message

 

在stroe文件下index.js中引入message模块

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import common from './modules/common'
import tags from './modules/tags'
import constant from "./modules/constant"
import borrowCar from './modules/borrowCar'
import message from './modules/message'
import getters from './getters'

Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user,
    common,
    tags,
    constant,
    message,
    borrowCar
  },
  getters
})

export default store

在消息数量A页面中导入辅助函数mapState

  import { mapState, mapGetters } from 'vuex'

    computed: {
      ...mapState({
        unReadNoticeNum: state => state.message.unReadNoticeNum,
        unReadNewsNum: state => state.message.unReadNewsNum,
        unReadTodoNum: state => state.message.unReadTodoNum,
        numContent: state => state.message.numContent
        //将numContent直接赋值给：value=‘numContent’

      }),
      ...mapGetters({
        unReadCount: 'message/unReadCount'
      }),
      newsName () {
       return `办结（${this.unReadNewsNum}）`
      },
      todoName () {
        return `待办（${this.unReadTodoNum}）`
      }
    },

created(){
  this.$store.dispatch('message/getnumContent')
}

最重要一步在B页面中每次新增一条消息数据，头部的消息数量随之改变

在B页面的提交保存方法中

this.$store.dispatch('message/getnumContent')

然后头部的消息数量就改变了。。。。