1.uniapp全局状态管理

概念:把多个组件之间共享数据抽离出来,通过一个“单例模式”进行管理

工具:具备全局状态管理的库

Vuex:全局状态管理中的库

步骤:

1.建立Store文件夹

2.建立index.js文件

1.uniapp全局状态管理_第1张图片

 3.在main.js中注册Vue插件

1.uniapp全局状态管理_第2张图片

 1.uniapp全局状态管理_第3张图片

 4.测试Vuex是否导入成功

a.1.uniapp全局状态管理_第4张图片

 1.uniapp全局状态管理_第5张图片

1.uniapp全局状态管理_第6张图片

 1.uniapp全局状态管理_第7张图片

 1.uniapp全局状态管理_第8张图片

5.构建Search模块

1.uniapp全局状态管理_第9张图片

更改State中数据的唯一方式是:提交一个mutations,通过函数实现1.uniapp全局状态管理_第10张图片

 1.uniapp全局状态管理_第11张图片

 1.uniapp全局状态管理_第12张图片

1.uniapp全局状态管理_第13张图片

使用

1.导入mapMutations

 1.uniapp全局状态管理_第14张图片

 

 

 

 

 

 6.状态管理-数据持久化

a.数据的保存

b.数据的读取

1.uniapp全局状态管理_第15张图片

 数据保存函数1.uniapp全局状态管理_第16张图片

 调用保存函数

 读取

1.uniapp全局状态管理_第17张图片

 

 

你可能感兴趣的:(UNIAPP,UNIBS,uni-app)