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

首先在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>
相关推荐
GIS程序媛—椰子10 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00116 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端19 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x22 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
木舟100923 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤439133 分钟前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习