14.vuex和localStorage，全局变量的区别

Posted 2023-04-11

参考技术A Vuex是状态管理，是为了解决跨组件之间数据共享问题的，一个组件的数据变化会映射到使用这个数据的其他组件当中。如果刷新页面，之前存储的vuex数据全部都会被初始化掉。

localStorage是H5提供的一个更简单的数据存储方式，之前是用cookie存放数据，但是cookie的数据量太小，所以就用localStorage，它可以有5M的限制，不受刷新页面的控制，长久保存。

所以，在用vue进行项目开发的时候，什么时候用到vuex呢？

当应用遇到多个组件共享状态时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一状态。

vuex的官网也说了，对于页面之间的传参对于多层嵌套组件将会很繁琐，而且对于兄弟组件之间的状态传递无能为力。所以就将这些组件的共享状态抽取出来，以一个全局单例模式管理，即vuex。

vuex和全局变量的区别：

1，【响应式】vuex的状态存储是响应式的，当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会得到高效更新。

2，【不能直接改变store】不能直接改变store的变化，改变store中状态的唯一途径是commit mutation。方便于跟踪每一个状态的变化。

vuex + localStorage 实现 token持久化

一、 通过vuex 和 localStorage 进行配合实现 token持久化

1. 我们知道 用 vuex保存token是为了每个组件都可以访问， 但vuex有一个缺点 就是刷新页面vuex中的数据会清空，这要导致只要用户一登录 并且刷新 保存的token就会消失，为了解决这个问题 我们要把token存在localStorage。

2. 为什么不存在sessionStorage里 个人觉得 sessionStorage虽然可以存储 但是它的生命周期不长，只要关闭页面后 sessionStorage里的数据会自动清空，而localStorage的数据只要不手动删除永远不会消失！！

如何vuex保存token？  跳转链接

二、封装一个保存、获取、删除token  .js文件

const myToken = 'my_token'

// 设置token
export const setToken = (newToken) => {
  localStorage.setItem(myToken, JSON.stringify(newToken))
}

// 获取token
export const getToken = () => {
  return JSON.parse(localStorage.getItem(myToken))
}

// 删除token   
export const remToken = () => {
  localStorage.removeItem(myToken)
}

// 清除所有localStorage的方法是 clear

上面有个注意点哦 如果保存的时候没有转换JSON对象 会将对象转换成字符串类型哦！！

三、保存token到localStorage

注意哈 这里是案例  按自己功能需要写到哪里

// 按需引入 设置token  保存token
import { setToken, getToken } from '../untils/localStorage'
// 保存在vuex 中  只截取了一部分代码 完整vuex在上面链接
 state: {
    // 获取token  如果getToken没有token值 转换为空对象   短路运算
    tokenInfo: getToken() || {}
  },
  // 修改state里的tokenInfo
  mutations: {
    setTokenInfo (state, newSetToken) {
      state.tokenInfo = newSetToken
      // 保存到localstorage
      setToken(newSetToken)
  }

四、魔法字符串

const myToken = 'my_token'

封装的时候我们发现 字符串赋值给了变量 

魔法字符串: 指的是, 在代码之中多次出现, 与代码形成强耦合的某一个具体的字符串或数值. 风格良好的代码, 应该尽量消除魔法字符串, 而由含义清晰的变量代替.

(ES6 -- 阮一峰)