vuex+localStorage实现最登录状态管理

夏末_阳光依然耀眼
2,441 阅读3分钟

这是我参与更文挑战的第8天，活动详情查看：更文挑战

localStorage特点：

1、localStorage拓展了cookie的4K限制；

2、localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个却是只有在高版本的浏览器中才支持的；

3、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性；

4、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换；

5、localStorage在浏览器的隐私模式下面是不可读取的；

6、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡；

7、localStorage不能被爬虫抓取到；localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空；

8、localStorage的使用也是遵循同源策略的，所以不同的网站直接是不能共用相同的localStorage

与sessionStorage的区别：

1、localStorage和sessionStorage的区别； 2、localStorage属于持久化保存（除非你删除，否则一直保存）sessionStorage是临时保存（页面刷新数据就没了）； 3、localStorage保存的数据可以跨页面，sessionStorage不可以；

20210820001249469.png

localStorage使用注意事项：

1、localStorage在保存数据的时候，同一个键只能保存一条数据

2、如果想要将多个数据保存到同一个键，可以将多条数据保存到数组，再保存到本地

3、如果将多个数据保存到数组中，获取的结果是字符串

4、以后遇到本地存储最终的完美解决方案：

保存数据的时候先将数据转化为字符串：JSON.stringify(值) 获取通过JSON.parse（）将获取的结果转化为对应的数组

结果：就是将数据从字符串转成数组，这样拿到的数据方便后续操作

Cookie特点：

大小：4k左右；临时保存：关闭浏览器就会消失；保存的数据可以跨页面；Cookie可以使用 document.cookie 属性来创建 、读取、及删除 cookie 还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

Cookie使用方法： 设置值：document.cookie="username=John Doe"; 取值：var x = document.cookie; 删除值：非常简单，只需要设置 expires 参数为以前的时间即可， 示例：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

在main.js引入vuex：

import Vuex from 'vuex';
Vue.use(Vuex);
new Vue({
  el: '#app',
  router,
  store, //将store注入根节点
  components: {App},
  template: '<App/>'
});

在src/目录下新建store文件夹 新建四个js文件，如下图：

142778388-5d380c373e819_fix732.png

编写index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters
})

编写state.js

// 如果本地缓存里有token，就将token赋值
let defaultToken = ''
try {
  if (localStorage.token) {
    defaultToken = localStorage.token
  }
} catch (e) {}

export default {
  token: defaultToken
}

编写mutation.js

export default {
  changeToken (state, token) {
    //登录或者注册时，存储token的方法
    state.token = token
    try {
      localStorage.token = token
    } catch (e) {}
  },
  clearToken (state) {
    //退出登录时清除token的方法
    localStorage.token = ''
    state.token = ''
  }
}

编写getters.js

export default {
  login: state => {
    // 计算登录状态，返回一个boolean值
    return state.token !== ''
  }
}

调用方法：

使用vuex对应的三个辅助函数mapState mapMutations mapGetters

// 在组件内引入
import { mapState,mapMutations,mapGetters } from 'vuex'

computed: {
    ...mapState(['token']), // 可以直接使用this.token访问
    ...mapGetters(['login']) //同上
}

methods: {
    ...mapMutations(['clearToken']) // 使用this.clearToken调用
}
avatar
文章
阅读
粉丝