目录
1. 直接使用 $store.getters.getSiteTitle 获取数据
2. 使用 $store.state.siteTitle 获取数据
一、需要优化的地方
1. localStorage 存储用户信息不安全
因为可以在本地存储创建一个account ,这样就绕过了登录检测
2. 更新用户信息比较麻烦
需要从本地存储取出来,然后处理,再存进去
保持登录的时效性,一般在大型网站中,如果一段时间没去操作,就会掉线
保持登录的时效性 token 登录鉴权 JWT鉴权
这就可以使用 vuex 来解决
Vuex 官网
二、Vuex
1. 安装依赖
1. 下载安装 vuex 依赖
vue2 安装 vuex 3 ,vue3 安装vuex 4
npm install vuex@3.6.0 -S
2. vuex 里有哪些重要的内容呢?
- State: 是一个对象,存储应用的所有状态。它是一个对象树,用于存放数据。
- Getters: 类似于 computed 属性,用于从 state 中派生出新的状态。
- Mutations: 触发状态更改的动作,且必须是同步的。
- Actions: 类似于 mutation,不同在于:
- Actions 提交的是 mutation,而不是直接变更状态。
- Actions 可以是异步的
2. 创建 store
1. 创建一个 store
这是官网的文档说明
2. 挂载 store
3. 获取数据
1. 直接使用 $store.getters.getSiteTitle 获取数据
解释代码
我们可以使用 created() 函数打印一下 store 看一下为什么可以直接 this.$store.getters.getSiteTitle 调用方法
2. 使用 $store.state.siteTitle 获取数据
可以看到通过 state 的siteTitle 也可以获取到数据
4. 修改数据
1. 定义方法
使用 mutations 同步修改数据
2. commit 修改数据
在登录页面的 created 钩子函数 使用commit 修改数据
第一个参数是方法名,第二个参数是修改的值
5. 存储登录成功后的信息
1. 使用 actions 修改数据
解释代码
为什么使用 actions 修改数据需要通过 mutations
2. 存储用户数据
在登录页面的成功回调函数中存储返回的数据
3. 判断是否登录成功
在路由器的路由守卫判断账号是否为空,如果不为空表示登录成功
测试
但是页面一刷新,存储的信息就没有了,怎么办?
解决方案:JWT 保持登录状态