7-底部路由完善

这里要讲的是如何在界面使用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