安装 vuex
npm install vuex --save
vuex安装完成之后,构建如下目录:
main.js文件下注册:
//实例化 store
import store from './vuex/store.js'
new Vue({
el: '#app',
store, //实例化 store
router,
components: { App },
template: '<App/>'
});
vuex中几个文件详情如下:
store.js
在store.js中目前保存一个数据,就是当前用户的名字
import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
Vue.use(Vuex);
export default new Vuex.Store({
//const store = new Vuex.Store({
//定义状态
state:{
currentUser:null, //当前用户
// isLogin:false //判断当前用户是否已经登录
},
getters,
mutations,
actions
});
//export default store
getters.js
export const currentUser = state=> state.currentUser
//export const isLogin = state=> state.isLogin
mutations.js
//更改用户状态信息
export const userStatus=(state,user)=>{
if (user){
state.currentUser = user
// state.isLogin = true
}else if(user==null){
//退出的时候清空sessionStorage里的东西
sessionStorage.setItem('userName',null);
// sessionStorage.setItem('userToke','');
state.currentUser = null;
// state.isLogin = false;
}
}
actions.js
//应用mutation
export const setUser = ({commit},user) =>{
commit('userStatus',user)
}
在用户登录的时候,我们就需要将用户名存放入sessionStorge,再由sessionStorage传入vuex中。
this.$ajax.post(meadiaurl.url+'/FH_AM6/api/login/toLogin',
this.$qs.stringify({
USERNAME:this.name,
PASSWORD:this.password
})
)
.then((res)=>{
let code = res.data.code
if(code==200){
this.$Message.success('登录成功');
this.$router.push("/main/recommend/webmedia");
//将用户名放入sessionStorage
sessionStorage.setItem('userName',this.name);
//将用户名放入vuex
this.$store.dispatch('setUser',this.name);
}else {
this.$Message.error('账号或密码不正确');
}
}).catch(()=>{
this.$Message.error('获取失败');
})
在你需要显示的用户名中输出:
this.$store.state.currentUser
<div>
<h4>{{this.$store.state.currentUser}}</h4>
</div>
每当刷新页面的时候,就会从sessionStorage中查询是否有userName的存在,如果没有则跳向登录页面
methods:{
isLogo() {
if (sessionStorage.getItem('userName')) {
this.$store.commit('userStatus',sessionStorage.getItem('userName'))
}else{
this.$router.push("/logo");
}
}
}
以上是本章全部内容