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

2023-12-18 19:49:55

首先在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:{

      }
    })

应用：

<!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中

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

在vue实例中引入：

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

应用：

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

二次封装axios

/*
 * @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状态机

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
  }
})

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)
    }
  }
}

<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

<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>

文章来源:https://blog.csdn.net/weixin_55269913/article/details/135065285
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！