使用vuex实现登录，vuex基本使用方法

1.store/index.js

import { createStore } from 'vuex'
import { Login } from '@/api/user' //引入登录方法

export default createStore({
    //vuex的基本数据，用来存储变量
    //取值：$store.state.token和...mapState(["token"])
    state: {
        token: ''
    },

    //提交更新数据的方法，必须是同步的
    //触发：1.action 中的 commit('mutation名称',data)
    //2.组件中的 $store.commit('mutation名称',data)和...mapMutations(["mutation名称"])
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token
        }
    },

    //包裹mutations，使之可以异步
    //触发: 组件中 $store.dispatch('action 名称', data)和...mapActions(["actions名称"])
    actions: {
        LoginResult({ commit }, userInfo) {
            return new Promise((resolve, reject) => {
                Login(userInfo).then(response => {
                    const { code, token } = response.data
                    if (code == 200) {
                        localStorage.setItem('token', token)
                        commit("SET_TOKEN", token)
                    }
                    resolve(response.data)
                }).catch(error => {
                    reject(error)
                })
            })
        }
    },

    //从基本数据派生的数据，相当于state的计算属性
    //触发：$store.getters()或...mapGetters()
    getters: {

    },

    //模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
    modules: {

    }
})

2.main.js

import store from "./store"
app.use(store)

3.login.vue

// vue3.0
import { useStore } from "vuex";
export default {
	setup() {
		const state = reactive({
		  form: {
		    username: "",
		    password: "",
		  },
		});

		const store = useStore();

		const onSubmit = async () => {
		  const { username, password } = state.form;
		  if (
		    username == undefined ||
		    password == undefined ||
		    username.trim() == "" ||
		    password.trim() == ""
		  ) {
		    return message.warning("用户名和密码不能为空！");
		  }
		  const res = await store.dispatch('LoginResult', state.form);
		  console.log(res);
		  console.log(store.state.token);
		};
		return {
		  ...toRefs(state),
		  onSubmit,
		};
  },
}

点击这个也可以参考一下，vue项目用户登录状态管理，vuex+localStorage实现