在vue3中使用vuex存储请求数据

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1. 在util/request中二次封装asios

import axios from "axios"
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'

const instance = axios.create({
    // 在这里引入基础url，后面的接口拼接在baseURL
    baseURL: "http://geek.itheima.net",
    timeout: 5000
});

instance.interceptors.request.use(config => {
    nprogress.start()
    return config
}, err => {
    return Promise.reject(err)
})

instance.interceptors.response.use(res => {
    nprogress.done()
    return res
}, err => {
    return Promise.reject(err)
})

export default instance

2. 在api/index文件中配置好请求

import request from '@/utils/request.js'

// 测试接口
export const allChannelListAPI = () => request({ url: '/v1_0/channels', method: 'get' })

// 用户登录
export const loginAPI=({mobile,code})=>request({url: '/v1_0/authorizations',method: 'post',data:{mobile,code}})

// 首页频道数据
export const userChannelAPI=()=>request({
    url:'/v1_0/user/channels',
    headers: {
        Authorization: 'Bearer ' + store.state.token
      }
})

3. 在组件里面发送请求

3.1 不使用vux

import { loginAPI } from "@/api";

<script>
import { loginAPI } from "@/api";
import { reactive, toRefs } from "vue";

export default {
  setup() {
    // 这里面的基本数据也都是响应式的，可以通过vue_devtools查看，后缀ref
    const loginForm = reactive({
      mobile: "13888888888",
      code: "246810",
      onSubmit
    });

    // 提交函数
    async function onSubmit() {
      try {
        const res = await loginAPI(loginForm);
        console.log(res);
        const { token, refresh_token } = res.data.data;
        console.log(token);
        console.log(refresh_token);
      } catch (err) {
        console.log(err);
      }
    }

    return {
      ...toRefs(loginForm)
    };
  }
};
</script>

3.2使用vux

在store/index.js

import { createStore } from 'vuex'
import login from './login'

export default createStore({
  modules: {
    login
  }
})

在store创建login.js专门存储登录页面的数据

import { loginAPI } from '@/api'

const state = {
    token: localStorage.getItem('token') || '',
    refresh_token: localStorage.getItem('refresh_token') || ''
  }
  
  const mutations = {
    SETTOKEN (state, token) {
      state.token = token
      localStorage.setItem('token', token)
    },
    SETREFRESHTOKEN (state, refresh_token) {
      state.refresh_token = refresh_token
      localStorage.setItem('refresh_token', refresh_token)
    }
  }
  
  const actions = {
    async asyncLoginAction (store, val) {
      try {
        const res = await loginAPI(val)
        const { token, refresh_token } = res.data.data
        store.commit('SETTOKEN', token)
        store.commit('SETREFRESHTOKEN', refresh_token)
        return Promise.resolve(res) // 返回成功的Promise对象
      } catch (err) {
        return Promise.reject(err) // 返回失败的Promise对象
      }
    }
  }
  
  export default {
    state,
    mutations,
    actions
  }

在组件里面使用vuex中的数据：

<script>
import { reactive, toRefs } from "vue";
import { useStore } from "vuex";
import {useRouter} from 'vue-router'

export default {
  setup() {
    const store = useStore();
    const router=useRouter()

    // 这里面的基本数据也都是响应式的，可以通过vue_devtools查看，后缀ref
    const loginForm = reactive({
      mobile: "13888888888",
      code: "246810",
      onSubmit
    });

    // 提交函数
    async function onSubmit() {
      store
        .dispatch("asyncLoginAction", loginForm)
        .then(res => {
          router.push({path:'/layout'})
        })
        .catch(err => {
          console.log(err);
          return
        });
    }

    return {
      ...toRefs(loginForm)
    };
  }
};
</script>

注意，mapActions,mapState等函数在vue3中无法直接使用。