很久没更新这个坑了,今天复习了一下Vuex,打算把Vuex在这个项目里面的使用写一下。
根据官方文档
当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏:
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
项目中,每次跳转路由前都会被导航守卫拦截一次,从localstorage中获取token和user信息,验证token以及user信息是否有效。为了方便获取和管理登录信息,使用Vuex进行状态管理。
具体实现
- 根目录下创建一个store文件夹,文件夹下创建一个index.js文件,在当前文件import vuex并注册
import Vue from "vue"
import Vuex from "vuex"
import user from "./modules/user"
Vue.use(Vuex)
const store = new Vuex.Store({
modules:{
user
}
})
export default store
- 在utils文件夹下创建一个auth.js文件,存放获取、设置登录信息的一些方法
// 获取 token
export function getToken() {
return localStorage.getItem(TOKEN_KEY)
}
// 保存 token
export function setToken(token) {
return localStorage.setItem(TOKEN_KEY, token)
}
// 获取用户信息
export function getUser() {
return JSON.parse(localStorage.getItem(USER_KEY))
}
//保存用户信息
export function setUser(user) {
localStorage.setItem(USER_KEY, JSON.stringify(user))
}
//移除用户信息
export function removeToken() {
localStorage.removeItem(TOKEN_KEY)
localStorage.removeItem(USER_KEY)
}
- 在store文件夹下创建modules文件夹,模块化状态管理。当前项目只有一个user模块,管理系统的token和user信息。
const user = {
state: {
token: getToken(),
user: getUser()
// token: null,
// user: null
},
mutations: {
SET_TOKEN(state, token) {
state.token = token
//将token保存到localstorage里面,因为路由跳转前(参考permission.js)需要从localstorage里面获取token
setToken(token)
//解决问题:跳转路由不需要获取token
// 但刷新后localstorage里没有信息,需保存
},
SET_USER(state, user) {
state.user = user
//将用户信息保存到localstorage里面
setUser(user)
}
},
actions: {
// 登录获取token
Login({ commit }, form) {
return new Promise((resolve, reject) => {
login(form.username.trim(), form.password).then(response => {
const resp = response.data
commit("SET_TOKEN", resp.data.token)
resolve(resp)
})
}).catch(error => {
reject(error)
})
},
//通过token获取用户信息
GetUserInfo({ commit, state }) {
return new Promise((resolve, reject) => {
getUserInfo(state.token).then(response => {
const respUser = response.data
// console.log("response.data", respUser)
commit("SET_USER", respUser.data)
resolve(respUser)
}).catch(error => {
reject(error)
})
})
},
//退出系统
Logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token).then(response => {
const resp = response.data
commit("SET_TOKEN", '')
commit("SET_USER", null)
removeToken()
resolve(resp)
}).catch(error => {
reject(error)
})
})
}
}
}
- 使用Vuex
在login.vue文件中,提交登录表单时调用方法
this.$store.dispatch([action方法名],[入参])
调用action方法,通过更改mutation来更改state,达到状态管理
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
//信息有效,导入信息
this.$store.dispatch("Login", this.form).then(response => {
console.log(response);
if (response.flag) {
//前往首页
this.$router.push("/");
} else {
this.$message({
message: response.message,
type: "warning"
});
}
});
} else {
console.log("error submit!!");
return false;
}
});
}
}