day14-项目-重点
### day14-项目-重点
#### 01-基础-vuex-actions 和 mapActions
> state:声明数据->组件的计算属性
>
> getters:声明复杂数据->组件的计算属性
>
> mutations:修改state的方法(同步方法)->组件的methods
>
> actions:异步方法(和后台交互->ajax)
```js
// actions:方法->异步
actions: {
fnac1(context) {
// context就是仓库
// 异步代码
setTimeout(() => {
const numNew = 200
// 在异步有结果的位置,把结果提交给mutations的方法
context.commit('setNum', numNew)
}, 1000)
}
}
App.vue
methods:{
fn2(){
this.$store.dispatch("fnac1")
...mapActions(["fnac2"])
}
}
02-基础-vuex-总结
管理流程(重点)
state:声明数据(响应式数据)->组件的computed
mutations:修改state的方法->组件的methods
actions:异步操作获取新数据->通过commit的方法把新数据交给mutations->组件的methods
03-案例-vuex-豆瓣电影-效果演示-接口说明
准备好布局+组件+路由配置之后,直接写vuex代码
说明:豆瓣电影的接口
- 接口文档打不开了
- 接口依然好用->知道了请求的url->发请求
- 支持jsonp->发送jsonp请求
04-案例-vuecli3-搭建项目
// 使用vuecli3指令创建项目
vue create 项目目录名
// 提示
// default(babel+eslint)
// 自己定制想要的工具(vuex/vuerouter等->空格)
cd 目录
npm run seve(npm run dev)
// 可以在两个网址运行项目
// 127.0.0.1
//网络IP
新目录多了一个public/index.html
目录简洁了
05-案例-vuex-豆瓣电影-准备代码分析
- movielist.vue列表
- moviedetail.vue详情
- router/index.js路由配置完毕
06-案例-vuex-豆瓣电影-安装第三方资源
bootsrap@3.3.7
vue-router
vuex
基本壳子->开始写vuex代码
07-案例-vuex-豆瓣电影-配置 vuex
把所有组件的state/mutatison/actions写在一起->不利于维护
希望:每个组件的state/mutatison/actions是自己的
利用store的modules:{}
store/index.js
// 仓库的入口文件
import Vue from 'vue'
import Vuex from 'vuex'
import movielist from './movielist'
Vue.use(Vuex)
const store = new Vuex.Store({
// state/mutations/actions
modules: {
movielist
}
})
export default store
movielist.js
export default {
state: {},
mutations: {},
actions: {}
}
08-案例-vuex-豆瓣电影-配置列表数据处理模块-state-mutations-actions
列表组件对应的数据管理模块
state: {
// 声明哪些数据?
title: "",
subjects: []
},
mutations: {
setData(state, payload) {
state.title = payload.title
state.subjects = payload.subjects
}
},
09-案例-vuex-豆瓣电影-列表--jsonp
- 发送jsonp请求
- 在请求有结果的位置,把结果交给mutations
// 之前:->store->state>title
// 现在:->store>modules->state->title
- 在数据管理模块movielist.js开启空间namespaced:true
- 使用 ...mapState("模块名",["title"])
10-案例-vuex-豆瓣电影-列表-渲染正在热映
v-for遍历subjects
403->无权访问->代理+第三方网站
11-案例-vuex-豆瓣电影-列表-watch 监测路由
当标识a->标识b时,之前的组件的钩子不会再触发->created中this.getData()
watch: {
$route(to, from) {
// 对路由变化作出响应...
this.getData(to.name);
}
},
12-案例-vuex-豆瓣电影-列表-vuex-router-sync
利用-vuex-router-sync让context可以管理路由的数据(route)
结果:变化的url不需要从组件传入
13-案例-vuex-豆瓣电影-详情-配置路由
在列表组件,点击图片->进入详情
14-案例-vuex-豆瓣电影-详情-渲染数据
列表组件->列表数据管理模块
详情组件->详情数据管理模块
15-基础-webpack-介绍
vuecli工具内置webpack工具
webpack:模块打包机(处理项目中各种资源->经过webpack打包->不同的模块)
模块化所解决的问题:
- 文件依赖(index.html src="a.js" src="b.js")
- 全局变量(a.js声明变量var sum=10,b.js var sum = 20;)
思考:webpack出现之前:js模块化问题怎么解决?
扩展
- js能做的事儿->表单->不需要考虑模块化
- ajax和后台交互->代码多->js需要模块化
- 函数自调(function(){函数源码})()->a.js
- 闭包->解决问题->全局变量被污染
- 2009 node出现了->js开发后台->逻辑复杂->js必须模块化
- 规定/标准/思想->Common.js/AMD/CMD->js代码怎么写才是模块
- require.js/sea.js等->编程层面->define("A")->require("a.js")
- ES6->import和export
- webpack->目前的终极模块化解决方案->痛点->配置繁琐(主流)
- parcel零配置模块化解决方案(国外+国内创业用的比较多)
16-基础-webpack-本地安装
前提:需要安装node
- 本地(推荐):每个项目使用自己的配置
- 全局:每个不同的项目使用的同一个配置(不合理) -g
npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
// 结果:可以在当前目录下使用webpack指令
webpack+回车
// webpack的使用:需要告诉webpack要打包的文件,把该文件打包什么样
17-基础-webpack-目录设置
- index.html用户入口
- src
- main.js 入口
- cal.js 非入口文件
- 在index.html引入main.js
18-基础-webpack-配置文件
webpack需要配置
webpack.config.js
// 配置webpack
// require('fs')
const path = require('path');
module.exports = {
mode: 'development',
// 入口:从哪个文件开始打包
entry: './src/main.js',
// 出口:打包的产物(结果)放在哪
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
index.html src="./dist/bundle.js"
19-基础-webpack-样式资源
引入.css文件
有活需要干->管家->找对应工人->工人去干活
有一个.css资源需要处理->webpack知道了->找指定的loader加载器去处理css资源
注意: webpack管家默认只能处理.js文件
rules: [{
test: /\.css$/,
// css-loader->处理样式代码
// style-loader->把css-loader处理的结果放在head的style里
// 顺序不能调+缺一不可+style处理的css-loadr结果+从后往前执行
use: [
'style-loader',
'css-loader'
]
}]
20-基础-webpack-图片资源
file-loader处理图片
测试:需要在dist手动创index.html src="./bundle.js"
21-基础-webpack-字体文件
补充
@font-face {
font-family: "cusFont";
src: url('./cusFont.ttf')
}
使用file-loader处理.ttf文件
22-基础-webpack-HtmlWebpackPlugin-清空
- CleanWebpackPlugin 清空dist
- HtmlWebpackPlugin生成.html文件(template)
23-基础-webpack-sourceMap-服务器
- SourceMap->调试bug
- webpack-dev-server->测试服务器->package.json->自定义指令->start->npm run start
建议:
- 路还很长:需要慢慢走(一直学)
- 学得快:(基本功c基础+算法数据结构(绕不开:大厂面试必问+前两年可以不看))