[JavaScript知识库]Vuex保持状态和WEBstorage存放信息搭配使用

首先，先了解一些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>