场景:vue全局获取登录用户名
一、main.js里配置安装
//安装vuex状态管理模式
import Vuex from 'vuex'
import store from './store.js'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
components: { App },
template: '<App/>'
})
二、store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 这里定义初始值
let state = {
adminName: ''
};
//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:
// 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
// 这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
//需要以相应的 type 调用 store.commit 方法:你可以在组件中使用 this.$store.commit('xxx') 提交 mutation
//store.commit({
// type: 'increment',
// amount: 10
// })对象方式提交
const mutations = {
//登录
login(state, name) {
state.adminName = name;
},
//登出
loginout(state) {
state.adminName = '';
}
};
// 事件触发后的逻辑操作
// 参数为事件函数this.$store.dispatch('login', this.user)
dispatch采用Promise链式调用
// this.$store.dispatch('login', this.user).then(() => {
// this.$notify({
// type: 'success',
// message: '欢迎你,' + this.user.name + '!',
// duration: 3000
// })
// computed: { //挂载获取数据,否则不会根据store动态改变
// user () {
// return this.$store.state.user
// }
const actions = {
// 登录
login(context, name) {
context.commit('login',name);
},
// 登出
loginout(context) {
context.commit('loginout');
}
};
// 返回改变后的数值
const getters = {};
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
三、应用
登录:
.then((res) => {
console.log(res);
if (res.data.code == 1) {//登陆成功
this.$router.push("/toMain/userInfo");//进入主页
this.$message({
message: '恭喜你,登陆成功',
type: 'success',
center: true
});
this.$store.dispatch('login', res.data.data);//状态管理
} else {
this.$message.error('用户名或密码错误!');
}
})
computed: {
name() {
return this.$store.state.adminName;
}
}
<span>当前用户:{{name}}</span>
退出登录:
loginout() {
this.$http.get(this.loginOutUrl).then((res) => {
console.log(res);
if (res.data.code == 1) {
this.$store.dispatch('loginout');//状态管理
this.$router.push('/');
} else {
this.$message.error("退出登录失败")
}
})
}
四、资料参考
https://blog.csdn.net/TONELESS/article/details/71638369