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

桃汁112023-12-23 3:24

首先在html页面中使用

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

javascript 复制代码 
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');
        }
      }
    };

第二步创建状态机实例

javascript 复制代码 
let store = new Vuex.Store(storeConfig);

第三步注册状态机实例

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

      },
      methods:{

      }
    })

应用：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.6.2/vuex.js"></script>

</head>
<body>
  <div id="app">
    <!-- 获取状态 $store.state/getters -->
    {{$store.state.public}}
    {{$store.getters.Upper}}
    {{$store.state.token}}
    <button @click="$store.commit('SET_TOKEN','ejhwksdfdskjfhsdkhgkasdjflas')">提交突变</button>
    <button @click="$store.dispatch('login',{username:'admin1',password:123321})">分发动作</button>
  </div>
  <script>
    // 1.声明状态机配置项 
    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');
        }
      }
    };
    // 2.创建状态机实例 
    let store = new Vuex.Store(storeConfig);
    new Vue({
      el:"#app",
      //3.注册状态机实例
      store,
      data:{

      },
      methods:{

      }
    })
  </script>
</body>
</html>

辅助函数

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

javascript 复制代码 
let {mapState,mapGetters,mapActions,mapMutations} = Vuex;

在vue实例中引入：

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

应用：

html 复制代码 
    {{public}}
    {{token}}
    <button @click="SET_TOKEN('假的token')">提交突变</button>
    <button @click="login({username:'admin1',password:123321})">分发动作</button>

二次封装axios

javascript 复制代码 
/*
 * @Author: 湛国辉 12289362+zhan-guohui@user.noreply.gitee.com
 * @Date: 2023-12-18 16:59:56
 * @LastEditors: 湛国辉 12289362+zhan-guohui@user.noreply.gitee.com
 * @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状态机

javascript 复制代码 
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中引入不同的状态机模块

javascript 复制代码 
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

javascript 复制代码 
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

javascript 复制代码 
<template>
  <div>
    <!-- 登录页面--{{msg}}--{{Upper}} -->
    {{$store.state.login.msg}}
    <button @click='login({username:"admin1",password:123321})'>登录</button>
  </div>
</template>
<script>
// 引入辅助函数
import {mapState,mapGetters,mapMutations, mapActions, Store} from 'vuex';
export default {
  data(){
    return {

    }
  },
  created(){
  },
  computed:{
    // 辅助函数参数(命名空间,[''])
    // ...mapState('login',['msg']),
    ...mapGetters('login',['Upper'])
  },
  methods:{
    ...mapActions('login',['login']),//相当于声明在login(){}
    // login(obj){
    //   // 触发异步登录动作
    //   this.$store.dispatch('login/login',obj)
    // }
  }
}
</script>

user.vue

javascript 复制代码 
<template>
  <div>
    用户组件---{{token}}
  </div>
</template>
<script>
import {mapState} from 'vuex';
import {get} from '@/utils/request'
export default {
  computed:{
    ...mapState('login',['token'])
  },
  methods:{
    async findAll(){
      let res = await get("/carousel/findAll");
      console.log(res,'获取响应');
    }
  },
  created(){
    this.findAll()
  }
}
</script>
相关推荐
风月说与山鬼4 分钟前
三、大括号语法
前端·react.js
kyriewen18 分钟前
我把最常踩的8个CORS跨域报错整理了一遍——第8个去年还不存在
前端·javascript
Csvn1 小时前
🕰️ 闭包 + setTimeout 的 5 个经典陷阱：为什么定时器看到的永远不是最新的值？
前端
lilian2331 小时前
Harmony os 技术实战｜拼豆制图27：用单字符编码承载 50 张 70×70 图纸
前端·数据库·华为·harmonyos
CarIise2 小时前
CSS选择器与样式关联
前端·css·tensorflow
里欧跑得慢3 小时前
CSS 模块化架构的演进：BEM、CSS Modules 到 CSS-in-JS 的反思
前端·css·flutter·web·css-in-js
IT_陈寒3 小时前
Vue的computed属性把我坑惨了，原来我一直用错姿势
前端·人工智能·后端
小灰灰搞电子4 小时前
Rust+Slint 实现温度计源码分享
前端·rust·slint
计算机魔术师4 小时前
面壁智能 OpenBMB 推出 MathForm，面向 Lean 4 数学自动形式化的开源框架、数据集与模型
前端
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新04历年考研数学一、数学二、数学三真题试卷及答案PDF052026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09VSCode+CodeX扩展，无法启动10如何新建文件夹？ 电脑新建文件夹的4种方法