Vue的状态机和axios的二次封装

首先在html页面中使用

第一步声明状态机的配置项

let storeConfig = {
      //类似于data 存储公共状态 存储数据
      state:{
        public:'hello vuex',
        token:""
      },
      // 类似于计算属性 对state中数据进行处理然后再返回
      getters:{
        Upper(state){
          return state.public.toUpperCase();
        }
      },
      // 突变 同步操作 修改state中的数据的唯一一种方式
      mutations:{
        SET_TOKEN(state,payload){
          // state是vuex默认提供的 payload载荷 提交突变传参 payload接收突变传递参数
          state.token = payload
        },
        // SET_PUBLIC(state,payload){
        //   state.public = payload
        // }
      },
      // 动作 异步操作 
      actions:{
        // 登录获取token 提交突变 把token传给突变 突变-->设置给state中token
        login(sto,payload){
          // sto类仓库对象 默认提供 commit提交突变  dispacth
          // 假设发送完成异步请求
          let token = 'esfkhsdakfjlskjfdlsjglkasdkfskfdasdasfksadf';//token就是后端获取数据token
          // 将token提交给突变
          sto.commit('SET_TOKEN',token);
          console.log(sto,payload,'22222');
        }
      }
    };

第二步创建状态机实例

let store = new Vuex.Store(storeConfig);

第三步注册状态机实例

new Vue({
      el:"#app",
      //3.注册状态机实例
      store,
      data:{

      },
      methods:{

      }
    })

应用：

  
  
  
  
  
  



  

    
    {{$store.state.public}}
    {{$store.getters.Upper}}
    {{$store.state.token}}
    提交突变
    分发动作
  
  

辅助函数

第一步：引入辅助函数从Vuex中

let {mapState,mapGetters,mapActions,mapMutations} = Vuex;

在vue实例中引入：

methods:{
        ...mapActions(['login']),
        ...mapMutations(['SET_TOKEN']),
        // 相当于 login(){}
      },
      computed:{
        // 引入辅助函数所对应的状态/数据 mapState('命名空间',['','',''])
        ...mapState(['public','token']),
        ...mapGetters(['Upper'])
      },

应用：

    {{public}}
    {{token}}
    提交突变
    分发动作

二次封装axios

/*
 * @Author: 湛国辉 [email protected]
 * @Date: 2023-12-18 16:59:56
 * @LastEditors: 湛国辉 [email protected]
 * @LastEditTime: 2023-12-18 17:20:01
 * @FilePath: \personal-warehouse\Vue\Day10\app01\src\utils\1.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import axios from 'axios'
import qs from 'qs'
import store from '@/store'
// 创建axios请求实例
const service = axios.create({
    baseURL:'',
    timeout:5000
})

// 请求拦截器
service.interceptors.request.use(config=>{
    if(store.state.login.token){
        // 设置请求头
        config.headers['Authorization'] = localStorage.getItem('token')

    }
    return config
},error=>{
    return Promise.reject(error)
})


// 响应拦截器
service.interceptors.response.use(response=>{
    return response.data
},error=>{
    return Promise.reject(error)
})

// 封装get post postJSON放法
export function get(url,params){
    return service.get(url,{
        params
    })
}

export function postJSON(url,data){
    return service.post(url,data)
}

// 表单格式post请求 将data数据转为表单格式
export function post(url,data){
    return service.post(url,qs.stringify(data))
}

export function del(url,params){
    return service.delete(url,{
        params
    })
}
export default service

在Vue脚手架运用

首先在main.js中引入store状态机

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在src文件中创建store文件夹创建两个状态机模块

在index.js中引入不同的状态机模块

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

Vue.use(Vuex)
// 引入登录状态机模块
import login from './login/login'
// 引入用户状态机模块
import user from './custom/custom'
export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    login,
    user
  }
})

login.js

import { postJSON } from "@/utils/request"
// 登录状态机 
export default {
  // 开启命名空间 
  namespaced:true,
  state:{
    msg:'hello vuex',
    token:"" || localStorage.getItem('token')
  },
  getters:{
    Upper(state){
      return state.msg.toUpperCase()
    }
  },
  // 突变 修改state唯一方式
  mutations:{
    SET_TOKEN(state,payload){
      state.token = payload;
      // 持久化存储 永久性存储 本地存储
      localStorage.setItem('token',payload);
    }
  },
  // 异步操作 动作
  actions:{
    async login({commit},payload){
      let res = await postJSON('/user/login',payload);
      console.log(res,'获取响应');
      // 提交给SET_TOKEN突变
      commit('SET_TOKEN',res.data.token)
    }
  }
}

login.vue

user.vue