Vuex 数据流管理以及手写Vuex

爱被打了一巴掌 2022-10-23 08:22 207阅读 0赞

### 这里写目录标题 ###

*  课程目标
 *  组件内的状态管理流程
 *  组件间通信方式回顾-父组件给子组件传值
 *  组件间通信方式回顾-子组件给父组件传值
 *  组件间通信方式回顾-不相关组件传值
 *  组件间通信方式回顾-通过 ref 获取子组件
 *  简易的状态管理方案!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/20210309194451919.png?x-oss-process=image/watermark,type\_ZmFuZ3poZW5naGVpdGk,shadow\_10,text\_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size\_16,color\_FFFFFF,t\_70)
 *  Vuex 概念回顾
 *  Vuex 的核心概念
 *  基本代码结构
 *  State（单一状态树（响应式的））
 *  Getter使用
 *  Mutation(同步执行)
 *   *  时光旅行和历史回滚
 *  Action（异步操作)
 *  Module
 *  Vuex严格模式
 *  购物车案例-演示
 *  购物车案例 - 模板
 *  购物车案例 - 商品列表
 *  购物车案例 - 我的购物车 - 统计
 *  购物车案例 - 购物车组件 - 全选
 *  购物车案例-本地存储
 *  手写Vuex-模拟 Vuex - 基本结构
 *  模拟 Vuex - install
 *  模拟 Vuex - Store 类ll

# 课程目标 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]

# 组件内的状态管理流程 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]

# 组件间通信方式回顾-父组件给子组件传值 #

prop

# 组件间通信方式回顾-子组件给父组件传值 #

$emit

# 组件间通信方式回顾-不相关组件传值 #

eventBus  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]

# 组件间通信方式回顾-通过 ref 获取子组件 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]  
少用ref，不然数据管理会混乱

# 简易的状态管理方案![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4] #

利用action去管理可以实现debug以及timeTravel以及历史回滚功能

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]

# Vuex 概念回顾 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]  
![如果需要共享数据的组件不多就不需要vuex][vuex]

# Vuex 的核心概念 #

![异步请求回调后commit，所有更改都需要通过mutation][commit_mutation]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]  
action后mutation

# 基本代码结构 #

# State（单一状态树（响应式的）） #

简化代码，这样就不用每次$store.state…了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]  
如果和data数据重叠可以用别名  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]

# Getter使用 #

需要对数据出来后展示可以用getters  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][20210309200354131.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]

# Mutation(同步执行) #

vuex中  
![在这里插入图片描述][20210309200824933.png]

![在这里插入图片描述][20210309200801666.png]  
简写![在这里插入图片描述][20210309200915425.png]  
![在这里插入图片描述][20210309200947782.png]

## 时光旅行和历史回滚 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]  
时光旅行  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]  
回滚这次提交前  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]  
![在这里插入图片描述][20210309201146563.png]

# Action（异步操作) #

vuex中  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]  
![在这里插入图片描述][20210309201355607.png]  
简化  
![在这里插入图片描述][20210309201445955.png]

# Module #

定义  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]  
模板中使用![在这里插入图片描述][20210309201753157.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]  
如果想把操作方法独立出来可以用命名空间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]![在这里插入图片描述][20210309202008540.png]

# Vuex严格模式 #

开启后直接修改（不通过mutation）state状态会报错，但值还是会被修改。

![在这里插入图片描述][20210309205519680.png]  
![在这里插入图片描述][20210309205547228.png]

注意 生产模式不要开严格模式，会深度检测状态数，影响性能。  
兼容处理  
![在这里插入图片描述][20210309205717658.png]

# 购物车案例-演示 #

购物车可拆分为  
![在这里插入图片描述][20210309210124918.png]

通过vuex不用考虑组件传值问题。

# 购物车案例 - 模板 #

# 购物车案例 - 商品列表 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]

# 购物车案例 - 我的购物车 - 统计 #

getter去实现  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]

# 购物车案例 - 购物车组件 - 全选 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]  
注意这里，因为是用vuex，最后不要用v-model  
![在这里插入图片描述][20210309223622968.png]

# 购物车案例-本地存储 #

分俩种

1.  登录》服务器存
2.  未登录》本地存

mutaition中每次操作存一次本地，可以用插件达到像axios过滤器的效果，每次修改后操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]  
安装好后打印看看，  
可以先判断当前的mutation是否是目标模块  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]  
使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 29]  
记住：中大型项目用才适合  
总结：dispatch中也是调用commit

# 手写Vuex-模拟 Vuex - 基本结构 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 30]

# 模拟 Vuex - install #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 31]

# 模拟 Vuex - Store 类ll #

let _Vue = null
    class Store { 
      constructor (options) { 
        const { 
          // 防止用户没传 给默认值 一般是这样 const { state }
          state = { },
          getters = { },
          mutations = { },
          actions = { }
        } = options
        this.state = _Vue.observable(state)//state响应式处理
        this.getters = Object.create(null)
        Object.keys(getters).forEach(key => { 
          Object.defineProperty(this.getters, key, { 
            get: () => getters[key](state)
          })
        })
        this._mutations = mutations //_表示私有
        this._actions = actions
      }
    
      commit (type, payload) { 
        this._mutations[type](this.state, payload)
      }
    
      dispatch (type, payload) { 
        this._actions[type](this, payload)
      }
    }
    
    function install (Vue) { 
      _Vue = Vue
      _Vue.mixin({ 
        beforeCreate () { 
          if (this.$options.store) { 
            _Vue.prototype.$store = this.$options.store
          }
        }
      })
    }
    
    export default { 
      Store,
      install
    }

mainjs中换自己的  
![在这里插入图片描述][20210309230033220.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70]: /images/20221023/60c65a5d3041461cbc3d13b3533dcaae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 1]: /images/20221023/10935fed4dd845a99cf3a2965e74d5e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 2]: /images/20221023/bd671081135148a9a0e5bb1f799577a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 3]: /images/20221023/c8f0f511ffe947aab5ed24750e2ac556.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 4]: /images/20221023/02a1a3139c484cbebd935f047347cddd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 5]: /images/20221023/cb101361367a4a49a29783fae9046831.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 6]: /images/20221023/ad0e52b8842e46fcb25a9fa03dc6fa70.png
[vuex]: /images/20221023/bab8a73e2cce48c28b3d7362605c1daf.png
[commit_mutation]: /images/20221023/9829f0c1983343b3acbd955f452f7e3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 7]: /images/20221023/44f94896beab4e6793b0e8c08a7ae601.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 8]: /images/20221023/51e3615adf724d398d38a6afbfa0faa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 9]: /images/20221023/5af68002cb6c45e98ee63f782fe0f13c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 10]: /images/20221023/6adaf5ff2ee642c888b1a90f41d5f948.png
[20210309200354131.png]: /images/20221023/116ca05590804d05870119ddd1129303.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 11]: /images/20221023/ed2fdfe3d03c4bce85fb443faf978a0a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 12]: /images/20221023/a4a46a0a8f974f868b27f2b1f63af587.png
[20210309200824933.png]: /images/20221023/1ab7ea28513a4340aca10f47a8828b07.png
[20210309200801666.png]: /images/20221023/26ab558a9937467b8047eac1f85f3e5a.png
[20210309200915425.png]: /images/20221023/14b560b7487b4ebf8af0121838536b25.png
[20210309200947782.png]: /images/20221023/a7c659dc3a8a42779d352295dfea7d4d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 13]: /images/20221023/701d24b2c240454ab0d51fd97c6c1d63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 14]: /images/20221023/53ebbc520f27493683c121fb6919040d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 15]: /images/20221023/7c168401217a439a94fab3976ba98750.png
[20210309201146563.png]: /images/20221023/b77fcb9ecd27428ebef08b8085f6ecc1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 16]: /images/20221023/94d35d6c6f024de9ac7c25ca43e16024.png
[20210309201355607.png]: /images/20221023/026a1bc674494495b03bd0b473ffb7a4.png
[20210309201445955.png]: /images/20221023/ca153190647b4873bc228167f477d919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 17]: /images/20221023/11ce33ed6a554977abf145ae44ab69e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 18]: /images/20221023/aa6189669f7e4030bb44d61282c7c2d3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 19]: /images/20221023/214901cb293748a89025cfccff08f76f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 20]: /images/20221023/4edf39ba30dc4d5cacab7838170782f5.png
[20210309201753157.png]: /images/20221023/50a2b35316f2483f956918debf3289a8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 21]: /images/20221023/747bd91b63774367b80a0466fe354b7e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20210309201944808.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ==,size_16,color_FFFFFF,t_70
[20210309202008540.png]: /images/20221023/8f205358c883499bb22e040af6ecc706.png
[20210309205519680.png]: /images/20221023/52049a5d287749ccbdf83b0c65a6eadc.png
[20210309205547228.png]: /images/20221023/fba3cae42d754e898d86e9610aa4fe77.png
[20210309205717658.png]: /images/20221023/764b1ad35f1245c8a0d01df52a91373a.png
[20210309210124918.png]: /images/20221023/39073730152f4bf68b2467281036f436.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 23]: /images/20221023/d088672ef6a841049529fb96a7318119.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 24]: /images/20221023/0783eace16904c7aad18eefa4065958e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 25]: /images/20221023/e2be0922d9534d1fb8e930458716426b.png
[20210309223622968.png]: /images/20221023/de7fb2e6acdc4f30aeb56a24e702ef0f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 26]: /images/20221023/98321eb6e8f546e787f3b801fc1d9fae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 27]: /images/20221023/a60f25338d974215a0070370da6e9013.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 28]: /images/20221023/be4dca72241c4a19865f9cd460680032.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 29]: /images/20221023/76a0c791837a4b2b89a5e153baf84f0d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 30]: /images/20221023/13b5979603154b96ae70f9b4880350c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTM0NTEwNQ_size_16_color_FFFFFF_t_70 31]: /images/20221023/57bc0abfe526480bb8c3b43f6b3466c3.png
[20210309230033220.png]: /images/20221023/96d4c5cbb163458b8e6233b1ff29ba42.png