这里要讲的是如何在界面使用vuex.store中的数据，以及如何通过服务器的属性设定，完成界面的修改
一.使用Vuex的一般步骤
1 api/index.js中设置请求地址
2 store/actions.js中发送请求API
3 store/mutations.js中操作state中的数据
4 对应的组件触发actions方法修改state
5 获取state渲染界面
6 在main.js中导入vuex并声明使用
二.在界面使用全局数据的两种方法
image.png
image.png
1 通过计算属性中的函数返回值
image.png
image.png
第一种方法的缺点是如果需要获取多个key字段，就需要写多个computed函数返回结果
2 通过Vuex提供的mapState辅助函数导入Vuex数据
- 在组件中导入mapState方法
-
在computed中使用mapState方法从state中一次取出多个全局数据
image.png
image.png
3 局部计算属性和全局计算属性的混合排列方法
只需要在调用mapState方法时在前面加三个.即可
image.png
三 底部工具条优化方法
这里要实现的是通过服务器数据方便的修改底部工具条的文字、图片、样式。由于请求服务器的json数据比较麻烦，这里在本地仿制一个json文件用于访问，读取数据，要用时，直接将它移植到设置的服务器地址下即可
3.1 新建目录文件
src/store/index
mutations
antions
state
getters
mutations-type
image.png
3.2 在state中定义全局变量
image.png
3.3 在mutations-type中统一mutations和antions中的方法名称
image.png
3.4 在mutations中定义方法操作state中的数据
image.png
3.5 在actions中请求api数据并调用mutations中的方法将请求的数据赋值给state
image.png
3.6 在index.js中创建vuex对象
image.png
3.7 在main中导入vuex对象并注册
image.png
3.8 在tabbar的create方法中调用actions中的方法
image.png
3.9 在computed属性中获取state的数据
image.png
image.png
3.10 渲染请求的数据
image.png
