书到用时方恨少
这个阶段涉及到了vuex,本来想着不慌，用起来，使用的过程中问题还真不少
本篇涉及到的内容：
---postman 测试数据
---封装 ajax 请求函数
---封装接口请求函数
---使用 vuex 管理状态
---获取首页相关数据
0. 其它
vue实战（1）：准备与资料整理
vue实战（2）：初始化项目、搭建底部导航路由
vue实战（3）：底部导航显示、搭建各模块静态页面、添加登录页页面与路由
vue实战（4）：postman测试数据、封装ajax、使用vuex管理状态
vue实战（5）：总结一
vue实战（6）：异步显示数据、开发Star组件
vue实战（7）：完整开发登录页面（一）
vue实战（8）：完整开发登录页面（二）
vue实战（9）：总结二
vue实战（10）：开发店铺详情（一）
1. 安装 MongoDB ，启动后台
- 这个小练习项目是一个前后台分离的项目，后台应用负责处理前台应用提交的请求, 并给前台应用返回 json 数据，前台应用负责展现数据, 与用户交互, 与后台应用交互。
- 后台应用是用
nodejs写的，数据库需要用到mongodb - 暂时不会
nodejs和mongodb，不过没关系，照着文档先用起来，问题不大。 - MongoDB 官方网站链接 和 教程与安装链接
- 后台应用是用
1.1 到MongoDB官网，下载适合的版本，安装好
1.2 到后台项目文件夹下，cmd，用npm start启动数据库
2. 使用 postman 测试数据
- 数据库打开以后，进一步去测试是否打开成功，是否能取到数据，这里就要用到接口测试工具 postman
- postman 可以获取数据、可以检测API文档中的接口是否有问题
- 项目重点也不在这里，可以去 postman 官方网站链接 下载客户端 和 很厉害的教程链接
- 查看API接口文档
1.1 根据经纬度获取位置详情(例子)
--请求URL：http://localhost:3000/position/:geohash
--示例：http://localhost:3000/position/40.10038,116.36867
--请求方式：GET
--参数类型：param
|参数 |是否必选 |类型 |说明
|geohash |Y |string |经纬度
--返回示例：
{
"code": 0,
"data": {
"address": "北京市昌平区337省道",
"city": "北京市",
"geohash": "40.10038,116.36867",
"latitude": "40.10038",
"longitude": "116.36867",
"name": "昌平区北七家宏福科技园(337省道北)"
}
}
1.2 接口输入postman中，查看结果
1.3 输出与文档相同，获取数据成功
3. 封装 ajax 请求函数
- 这里的异步交互使用的是
axios,需要在项目中添加依赖npm install --save axios - 这里的封装非常重要，虽然代码不是很难懂，但是感觉是 知其然而不知其所以然 ，这也是贯彻了模块化开发的思想，还是先用起来，会熟能生巧的。
- 在 api 文件夹下创建 ajax.js ，引入
axios：import axios from 'axios'
import axios from 'axios' /* ajax请求模块 封装ajax请求函数 */ export default function ajax (url = '', data = {}, type = 'GET') { // type 默认传 get return new Promise(function (resolve, reject) { // 返回 new promise，后面会用到 async 和 await let promise if (type === 'GET') { // 判断 get let dataStr = '' // 数据拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { // 拼接成 url 地址 dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } // 发送get请求 promise = axios.get(url) } else { // 发送post请求 promise = axios.post(url) } promise.then(response => { resolve(response.data) }) .catch(error => { reject(error) }) }) }4. 封装接口请求函数
- 在 api 文件夹下创建 ajax.js ，引入
- ajax 请求封装完成之后，就是开始封装各个接口请求函数
- 在 api 文件夹下创建 index.js ，引入
ajax：import ajax from './ajax'
- 在 api 文件夹下创建 index.js ，引入
- 这个就好理解的多，根据项目需求的不同，需要的接口会非常的多，这样做也是模块化的体现，便于管理和维护
/* 包含多个模块ajax函数
* 封装接口请求函数(一部分例子)
* */
import ajax from './ajax'
const BASE_URL = '/api' // 关于跨域
// 1、根据经纬度获取位置详情
// 此处直接这么写，当请求时会出错，因为后台代码的端口是4000（或域名），与本地的请求端口不一致，自然无法实现跨域ajax请求，需要代理配置
// export const reqAddress = (geohash) => ajax(`/position/${geohash}`)
export const reqAddress = (geohash) => ajax(`${BASE_URL}/position/${geohash}`)
// 2、获取食品分类列表
export const reqCategorys = () => ajax(`${BASE_URL}/index_category`)
// 3、根据经纬度获取商铺列表
export const reqShops = (latitude, longitude) => ajax(`${BASE_URL}/shops`, { latitude, longitude })- 此处涉及到跨域的问题，需要进行一些配置
- 因为本项目使用
vue-cli3脚手架搭建，没有现成的配置文件，现在需要在根目录下创建vue.config.js，查了一些资料，有点杂而且比较落后，其中一些参数已经被弃用了，配置了一个简洁的，其它配置可以看 官方文档
// vue.config.js module.exports = { // 修改的配置 publicPath: '/', devServer: { proxy: { '/api': { // 匹配所有以 '/api'开头的请求路径 target: 'http://localhost:4000', // 代理目标的基础路径 changeOrigin: true, // 支持跨域 // ws: true, pathRewrite: { // 重写路径: 去掉路径中开头的'/api' '^/api': '' } } } } } - 因为本项目使用
- 配置完成，测试一下是否能够取到数据，可以在
App.vue中引入import { reqCategorys } from './api'，添加mounted方法
async mounted () { // 例子
const result = await reqCategorys()
console.log(result) // 打印输出
}
5. 创建 vuex 整体结构，管理状态
关于vuex的学习，起初不是怎么会用，看了官方文档也没怎么懂，看了几篇博客知道了一些使用方法，视频中对这部分的构建还是去年的形式，我照着现在的形式搭建了一下，因为只知其一不知其二，这也造成一些问题，好在目前遇到的问题都解决了，问题不大，后面还需要继续深入学习。
- 首先是下载依赖，并且在
main.js中配置好import store from './store/store'，并且在store.js中引用import Vuex from 'vuex'和使用Vue.use(Vuex)- 如果在创建项目时已经配置好 vuex ，则无需在
main.js中配置，已经是配置好的了
```
// vuex最核心的管理对象store
import Vue from 'vue'
import Vuex from 'vuex'
- 如果在创建项目时已经配置好 vuex ，则无需在
// 引用模块
import msite from './modules/msite'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
msite // modules文件夹中的msite模块
},
getters
})
+ 模块的编写（例子）// 内容比较多，这边可以把相似或者功能相同的组成一个模块，更方便维护
// 模块文件在store.js中引用
import { // 引用封装好的接口
reqAddress,
reqCategorys,
reqShops
} from '../../api/index'
// 基础数据状态,现在在任何文件都可以引用，引用时 this.$store.xxx 即可
const state = {
latitude: 40.10038, // 纬度
longitude: 116.36867, // 经度
address: {}, // 地址信息对象
categorys: [], // 分类数组
shops: [] // 商家数组
}
// 直接更改state的多个方法的对象，现在在任何文件都可以引用，引用时 this.$store.commit（'xxxx'）即可
const mutations = {
RECEIVE_ADDRESS: (state, { address }) => { // 接受地址
state.address = address
},
RECEIVE_REQCATEGORYS: (state, { categorys }) => { // 接受食品分类数组
state.categorys = categorys
},
RECEIVE_REQSHOPS: (state, { shops }) => { // 接受商家数组
state.shops = shops
}
}
// 与后台交互的数据，现在在任何文件都可以引用，引用时 this.$store.dispatch（'xxxx'）即可
const actions = {
// 异步获取地址
async getAddress ({ commit, state }) {
// 发送ajax异步请求
const geohash = state.latitude + ',' + state.longitude
const result = await reqAddress(geohash)
// 提交一个mutations
if (result.code === 0) {
commit('RECEIVE_ADDRESS', { address: result.data })
}
},
// 异步获取分类列表
async getCategorys ({ commit }) {
const result = await reqCategorys()
if (result.code === 0) {
commit('RECEIVE_REQCATEGORYS', { categorys: result.data })
}
},
// 异步获取商家列表
async getShops ({ commit, state }) {
const { latitude, longitude } = state
const result = await reqShops({ latitude, longitude })
if (result.code === 0) {
commit('RECEIVE_REQSHOPS', { shops: result.data })
}
}
}
export default { // 把方法暴露出去
namespaced: true,
state,
mutations,
actions
}
+ *vuex* 构建好，下面是使用测试，在需要的地方使用
+ 这里还涉及到了 *vuex* 的辅助函数，`mapState`、`mapMutations`、`mapAction`，[vuex最简单、最详细的入门文档](https://segmentfault.com/a/1190000009404727)，这篇文章写的非常好，具体的就不展开了，直接使用起来，问题不大。
+ 首先在`App.vue`中引入`import { mapActions } from 'vuex'`，使用需要的方法
+ 现在我们需要其中的 *name* 属性数据，在`Msite.vue`中引用`import { mapState } from 'vuex'`,添加 *computed* 方法：`computed: { ...mapState('msite', ['address'])}`，然后就可以愉快的使用了<HeaderTop :title = "address.name">
<router-link class="header_search" slot="left" to="">
<i class="iconfont iconfangdajing"></i>
</router-link>
<router-link class="header_login" slot="right" to="">
<span class="header_login_text">登录|注册</span>
</router-link>
</HeaderTop>```
- 遇到一个 大坑
vuex 使用 ...mapState 获取到 undefined，这是我遇到的一个坑，这篇文章正好解决了我的问题。
6. 结束
感觉这个部分是最难的部分了，还是不熟悉的原因，下面都是逻辑处理方面的内容了
1179
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
