1、前言php
博主也是vue道路上的行者,道行不深,但愿本身的东西能对你们有所帮助。这篇博客针对 了解过vue基础,可是没有作过vue项目的童鞋。若是想看基础指令,能够看我以前的一篇博客,请点击 跳转, 不过我仍是建议看文档比较好。os: Vue文档是很是详细的html
2、准备vue
作vue单页应用都须要会什么?react
1. vue的脚手架,直接帮你建好项目。再看看本身想要啥,补充啥! os: Git 上有不少成品项目,能够找一个好点的拉下来ios
注: 路由按需加载、热加载 等这些都是基础功能,在这很少说。os: 慕课网有Vue的课程,网上有资源,挺不错的
vuex
2. 引入并会使用 vuex。对共享变量进行统一管理,解决多层组件传数据的问题。这个咱后面详说。json
3. 封装 axios,对请求进行统一的管理,并减小代码量。axios
3、关于vuexpromise
出现背景: 了解过vue1.0的人应该都知道,vue的父子组件通讯是很烦的,一层还好。若是有个三、4层,那父子组件通讯,就头疼了。之前,这是须要开发者捋清逻辑,在合适的地方修改并传递的。可是vue2.0为了解决这个问题,提出了vuex,状态统一管理。网络
做用: vuex 将全部须要共享的变量放在一块儿,像一个仓库通常,你想对仓库中的变量 读取、修改 ,直接调 指定方法就能够,超级方便。
结构: vuex的结构大体为:
state: 存放全部变量
mutations 存放同步读取、修改state的的方法
action 存放异步读取、修改state的的方法
.......还有不少其余的 os: 这篇博客只是帮你们了解如何用Vue作单页应用。
注: 1. 不是全部变量都要放到 state 中,vuex 创立的初衷是方便咱们对变量的管理,然而对组件的一些私有变量,不须要和别的组件共享。因此,state里面只放全局变量、多组件共享变量。
2. 解释一下 action ,所谓异步,就是在 action 文件中写方法,调 axios,而后再 调 mutations 同步修改state。不少人不理解,其实,这就是一个概念性的问题。action并无从根本上解决异步修改state的竞争问题,可是咱们须要理解、并将 异步这个操做 摘出来放在一块儿。
os: js脚本 原本就是同步的东西,一根筋,同一时间没法处理2件事,不存在多线程处理事务。不过,科技发展的这么牛逼,你们懂得。这个异步、竞争的思想仍是要提出来的,指不定哪天就被你们研究出了解决方案。
4、关于vuex的具体使用
先看一下项目的部分目录结构
1. state.js
const state = {
topList: {},
msgg: '1231321312',
alertFlag: {state: false, type: ''},
errorStatus: '',
alertData: {title: '警告', content: '这是敏感信息,一旦删除,不可再恢复,确认删除吗', operateOk: '肯定', operateCan: '取消', time: ''},
httpError: {
hasError: false,
status: '',
statusText: ''
},
tip: {
tipFlag: false,
tipMsg: ''
}
}
export default state
state 文件里面存放一个state对象,具体的元素就是咱们的变量了,须要什么数据,和组件的data函数中同样写法。这里只是起到存储做用
2. mutations.js
import * as types from './mutation-types'
const mutations = {
// 显示弹窗
[types.SET_ALERT_FLAG](state, data) {
state.alertFlag = data
},
// 设置弹窗内容
[types.SET_ALERT_DETAIL](state, data) {
Object.assign(state.alertData, data)
},
[types.ON_HTTP_ERROR](state, payload) {
state.httpError = payload
},
// 设置提示弹层
[types.SET_TIP_INFOR](state, data) {
state.tip = data
}
}
export default mutations
mutations 同步修改 state的值,仅仅是提供一个方法,接收参数,修改state值的文件。就是一个存储修改state方法的仓库。
通常咱们在开发的时候请求比较多,咱们会新建一个 mutation-types.js 文件,将全部函数用常量保存。其实也没什么特殊意义,仅仅是将方法统一保存,查找、维护比较方便而已。
3. action
import * as types from './mutation-types'
import { getTest } from '../server/index.js'
export const getData = function ({commit, state}, {list, index}) {
commit(types.SET_TIP_INFOR, {tipFlag: false, tipMsg: ''})
}
export const actionTest = function ({commit, state}, data) {
getTest({
url: 'getPhoneCode.php',
data: JSON.stringify({
'phone': '18862533985'
})
})
.then(response => {
console.log(response.data)
commit(types.SET_ALERT_DETAIL, {title: '提示', content: '您肯定要还款吗?'})
commit(types.SET_ALERT_FLAG, {state: true, type: ''})
})
}
action 异步修改 state 的值。说白了,action也是一个存放修改state方法的仓库,可是 这些方法都是要调axios请求的(因此叫异步),请求完事了,再调 mutations 去同步修改state的值。所谓的异步都是咱们本身写的。固然你不这么写也行,只是设计者的初衷是想让让开发者清楚异步修改的概念,虽然暂时没有解决根本问题。
这里涉及到axios请求,这个下边解释,暂时先清楚 action的概念。
4. vuex和组件通讯
上述介绍了 vuex的几个部分的做用,那如今就是如何在组件中去使用 vuex
首先,在main.js中,你须要将store对象引入到整个应用中
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
而后在组件中使用
// 直接使用 <alert v-if="this.$store.state.alertFlag.state"></alert> // 同步的 commit this.$store.commit('SET_ALERT_DETAIL', {title: '提示', content: '您肯定要还款吗?'} // 异步的 dispatch this.$store.dispatch('actionTest').then(() => {})
简单介绍一下:
this.$store.state. 咱们经过$store对象 ,直接使用state中的属性
this.$store.commit('', {}) 经过 commit 方法调 mutations-types 中的方法(其实就是mutations的方法),这步是同步的,并且数据会自动监听变化就行渲染
this.$store.dispatch('actionTest').then(() => {}) 经过 dispatch 的方法调 action 的方法,异步修改 state
注:vue中的这个 this 注意他的指向,建议不肯定时,先将this赋给变量保存起来,有时常常会和window对象混淆。
以上就是vuex最基础的用法,也是最经常使用的方法。其余的像 getters 、如何组件中引入vuex等等,这里就不细说了,你们能够根据自身需求自行看文档补充。
5、 封装axios
在一个完整的项目中,咱们的和服务端的交互会很频繁,一个项目会有不少请求,冗余代码不少。因此将请求封装,统一管理仍是颇有必要的。咱们如今作一个简单的封装。
1. 先看一下结构
2. 看一下具体代码
axios.js 文件
import axios from 'axios'
// 建立axios实例 application/x-www-data-urlencoded application/json
const service = axios.create({
baseURL: 'http://www.niepengfei.cn/PHPFile/ybtDemo/',
timeout: 15000,
headers: {'Content-Type': 'application/json'}
})
service.interceptors.response.use(
function(response) {
// 请求正常则返回,这里返回了全部的请求头和请求体信息
return Promise.resolve(response)
},
function(error) {
// 请求错误则向store commit这个状态变化
const httpError = {
alertFlag: true,
errorStatus: error.response.status,
msgg: error.response.statusText
}
this.$store.commit('SET_ALERT_FLAG', {state: false, type: 'ok'})
console.log(httpError)
return Promise.reject(error)
}
)
export default service
index.js 文件
import request from './axios.js'
export function getTest(axiosData) {
var data = {
url: '',
method: 'post',
data: ''
}
// 合成请求对象
Object.assign(data, axiosData)
return request(data)
}
这里咱们仅仅作了post 请求的封装。先对axios作上默认请求的数据,封装成函数,有传参就合并修改参数数据,请求结束以后,根据response、error,分红成功和失败两个函数,并将整个promise对象返回。对于请求的拦截这里没作。并且对网络请求的错误码也是你们根据项目具体提示的。我这里也不作详细的说明了
3. 组件中使用
import { getTest } from '../../server/index.js'
getTest({
url: 'login.php',
data: JSON.stringify({
'phone': thiss.phone,
'phoneCode': thiss.phoneCode
})
})
.then(response => {
console.log(response.data)
if (response.data.code === '0000') {
...
}
})
将封装的axios引入组件,而后直接调用便可
6、总结
以上就是 vuex+axios封装的实例,时间缘由,这里进提供思路和简单的实现方法,至于具体项目具体分析,axios要怎么封装,vuex还需作什么监听,那就是你们为本身项目定制的东西了。
好了,以上就是整篇博客的全部内容,但愿对你们有所帮助。若是,文中有错误的地方还请你们及时指出。
若是喜欢我博客的朋友能够添加个关注,之后多交流技术问题!近期还会在更新一些react的博客。