学习笔记-Vuex

目录

一、需要优化的地方

1. localStorage 存储用户信息不安全

2. 更新用户信息比较麻烦

二、Vuex

1. 安装依赖

1. 下载安装 vuex 依赖

2. vuex 里有哪些重要的内容呢？

2. 创建 store

1. 创建一个 store

2. 挂载 store

3. 获取数据

1. 直接使用 $store.getters.getSiteTitle 获取数据

解释代码

2. 使用 $store.state.siteTitle 获取数据

4. 修改数据

1. 定义方法

2. commit 修改数据

5. 存储登录成功后的信息

1. 使用 actions 修改数据

解释代码

2. 存储用户数据

3. 判断是否登录成功

---

一、需要优化的地方

1. localStorage 存储用户信息不安全

因为可以在本地存储创建一个account ，这样就绕过了登录检测

2. 更新用户信息比较麻烦

需要从本地存储取出来，然后处理，再存进去

保持登录的时效性，一般在大型网站中，如果一段时间没去操作，就会掉线

保持登录的时效性  token 登录鉴权  JWT鉴权

这就可以使用 vuex 来解决

Vuex 官网

Vuex 是什么？ | Vuex

二、Vuex

1. 安装依赖

1. 下载安装 vuex 依赖

vue2 安装 vuex 3 ，vue3 安装vuex 4

npm install vuex@3.6.0 -S

2. vuex 里有哪些重要的内容呢？

1. State: 是一个对象，存储应用的所有状态。它是一个对象树，用于存放数据。
2. Getters: 类似于 computed 属性，用于从 state 中派生出新的状态。
3. Mutations: 触发状态更改的动作，且必须是同步的。
4. 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 保持登录状态