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,
};
},
}