1、Vuex是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
简单理解就是:共享数据的地方,存储数据(状态数据)
2、客户端共享数据区域:
1、Cookie区域,存储在浏览器端,4kb字符串
2、本地存储:
(1)localStorage 永久存储 5M
(2)sessionStorage 会话
Vuex 内存 刷新页面数据丢失
3、核心方法:
将公共数据封装在state里面:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//状态区域,定义数据的地方
user:{
id:'',
username:'',
roleId:'',
roleName:''
},
bool:true
},
mutations: {
//相当于编写set方法
setUser:function(state,LoginUser){
state.user=LoginUser;
},
setBool:function(state,b){
state.bool=b;
}
},
actions: {
//写一些异步的操作
setUserAysnc:function(context,LoginUser){
context.commit("setUser",LoginUser);
}
},
modules: {
}
})
在页面中给上述方法传参:
<script>
export default {
data(){
return{
ruleForm:{
username:" ",
password:" "
}
}
},
methods:{
login:function(){
//var _this=this;使用箭头函数可以直接使用this
/* _this.$axios({
method:"post",
url:"http://123.57.7.108:1024/emall/login",
data:{
username:this.ruleForm.username,
password:this.ruleForm.password
}
}).then(function(response){
if(response.data.code=="200"){
window.localStorage.setItem("token",response.data.data.token);//永久存储令牌
_this.$message({
message: '登录成功',
type: 'info'
});
}else{
_this.$message({
showClose: true,
message: '用户名或者密码错误',
type: 'warning'
});
}
}).catch(function(error){
_this.$alert(error);
});*/
//改写axios
//data就是从数据接口中获取数据对象
this.$api.__api_login( this.ruleForm).then(data=>{
this.$message({
message:'登录成功哦',
type:'info'
});
//存储token
window.localStorage.setItem("token",data.data.token);
//跳转页面即切换路由
//将用户信息取出来,存储在Vuex中
//this.$store.commit("setUser",data.data.user);
//如果要用action进行异步操作
this.$store.dispatch("setUserAysnc",data.data.user);
//this.$store.commit("setUser",date.date.user);
/* this.$router.push({
path:'/about',
query:{
name:this.ruleForm.username
}
});*/
//通过name切换路由,类似于post,保护数据
this.$router.push({
name:'About',
params:{
name:this.ruleForm.username
}
});
}).catch(error=>{
this.$message({
message:'我是catch,登录失败',
type:'info'
});
});
}
}
}
</script>
然后就可以再其他页面使用:
<template>
<div class="about">
<h1>跳转到了About页面</h1>
<h4>{{this.$route.params.name}}</h4>
<h5>
从Vuex中获取User信息:
{{this.$store.state.user.roleName}}
</h5>
</div>
</template>