记录：vue使用cookie、vuex和localstorage、sessionStorage进行状态管理

一.cookie、session、localStorage、sessionStorge总体介绍

cookie：浏览器储存，最大4KB，请求头会自动带上（最先验证的时候可以使用），vue中默认有效时间为浏览器关闭，django中可以自己设置。（位于google的setting里面，你可以去找找/控制台的Application里面都有）

session：保存在服务器，配合着用挺好。（一般是放在数据库里的session表里面）

localStorage：除非被清除，否则永久保存，大小5M，最大好处，你不删除永远存在。（控制台的Application里面都有）

sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除，大小5M，这是它与上面的区别。（控制台的Application里面都有）

localStorage:

1.查询数据：localStorage.getItem('dataTest')

2.修改数据：localStorage.setItem('dataTest', '这是测试的')

3.删除数据/全删除：localStorage.removeItem('dataTest') | localStorage.clear()

sessionStorage:

1.查询数据：sessionStorage.getItem('token')

2.修改数据：sessionStorage.setItem('token', 'lalla')

3.删除数据/全删除：sessionStorage.removeItem("token")  | sessionStorage.clear()

cookie:

cookie.js

export function setCookie (cname, value, expire) {
  var date = new Date()
  date.setSeconds(date.getSeconds() + expire)
  document.cookie = cname + '=' + escape(value) + '; expires=' + date.toGMTString()
  // console.log(document.cookie)
}

export function getCookie (cname) {
  if (document.cookie.length > 0) {
    let cstart = document.cookie.indexOf(cname + '=')
    if (cstart !== -1) {
      cstart = cstart + cname.length + 1
      let cend = document.cookie.indexOf(';', cstart)
      if (cend === -1) {
        cend = document.cookie.length
      }
      return unescape(document.cookie.substring(cstart, cend))
    }
  }
  return ''
}

export function delCookie (cname) {
  setCookie(cname, '', -1)
}

然后在main.js里面注册

二.vuex

vuex我觉得就是组件之间的一个便利的状态通信，如何传递一个状态都要去用父组件转递，bus传递，考虑到这样特别费劲，所以用它吧，仅个人认为。

vuex创建store文件夹

index.js

getters.js

在vue里面我们需要获取vuex值的时候，一般两个方式：this.$store.state.name   |    this.$store.getters.getUsername

rootState.js

actions.js

mutations.js

这个就是项目结构了，vuex刷新页面状态就没了，所以需要localStorage或者sessionStorage来配合

下面是具体的使用方法：

1.查询数据：this.$store.state.name   |    this.$store.getters.getUsername

2.修改数据：this.$store.dispatch('changeName', 'newname')