首先，先了解一些Vuex，引入就先不多说了，引入Vuex相信组件库里比我更加全面，下面说一下Vuex常用的几个属性
State：[
属性:存放想要保存的数据
]
Mutations：[
用来使用state的方法 （同步）
格式 eg：
loginOK（state，payload）{ #state是上面存储的数据，payload是页面传来的数据
内容
}
]
Actions：[
异步使用方法
]
Actions和mutations的区别就是一个同步，一个异步，为了结构上更加合理
-------------------------------------------------------------------------------------------------
下面来说一些如何使用这些数据：
/*提交vuex，更新信息*/
这是在需要保存的页面写的代码
This.$store.commit(‘mutations里的方法’,赋值)
这是在vuex里面写的：
State.（里面的数据属性名） #调取state里的数据
-----------------------------------------
相信很多小伙伴都会想
为什么已经用Vuex持久化了，为什么还要用WEBstorage呢？
因为Vuex在刷新将丢失数据
而html更新后自带的功能更加强大，更符合我们的项目需求
webStorage提供了两块存储空间（他们都是key:value存储结构）：
LocalStorage： 永久存储。只要用户不清楚浏览器缓存，永久有效。
SessionStorage 单会话存储。若用户重启浏览器，则数据销毁。刷新并不会销毁存储在sessionStorage里的数据。
如果想一直保存数据，需要vuex搭配webstorage ,根据需求选择loacl或者session
那么我们该如何调用使用呢？
这里拿Sessionstorage举例子，如果用的Localstorage，直接替换就行
查：
Sessionstorage.getItem(‘state里面的属性’)
改：
Sessionstorage.setItem(‘state里面的属性’，赋值)
删：
Sessionstorage.removeItem(‘state里面的属性’)
清除数据：
Sessionstorage.clear()
有一点要注意的是，存储数据要不能存对象，如果需要，需要转字符串 eg：
let ls = window.localStorage
let ss = window.sessionStorage
ls.setItem('islogin', 'true')
ss.setItem('username', 'zs')
// 若存储对象
let user = {name: 'zs', age: 15, gender: '男'}
sessionStorage.setItem('user', JSON.stringify(user))
---------------------------------------------
大家看了这么久，相信对于原理和使用方法已经有了一定的了解，下面直接上代码，方便大家更轻松的掌握 下面是一个简易的登陆保持 一个vuex，一个index首页（用到保持的信息），一个login登录页（提交需要保存的信息）
Vuex:
state: {
islogin:sessionStorage.getItem('islogin'), //用于存储当前用户是否已登陆
username:sessionStorage.getItem('username'), //存储当前用户名
},
mutations: {
// 提供一个方法,登陆成功后修改state属性
loginok(state,payload){
state.islogin=true //修改登录状态
state.username=payload //修改登陆用户信息
//还需要将状态信息,存入sessionStorage
sessionStorage.setItem('islogin',true)
sessionStorage.setItem('username',payload)
},
Login.vue:登录页
<script>
if(this.checkName() && this.checkPwd()){
console.log('登陆成功');
this.axios.post('/login',
`username=${this.name}&password=${this.pwd}`)
.then(
res=>{
if(res.data.code==200){
// 提交vuex,更新用户信息
this.$store.commit('loginok',this.name) //此处的this.name就是payload
// 弹窗跳转
this.$toast('登陆成功')
this.$router.push('/')
}else{
this.$messagebox({
title:'提示',
message:"账号密码输入错误"
})
}
</script>
Index.vue:
<div slot="right" v-if="$store.state.islogin">
欢迎:{{$store.state.username}}
</div>