day14-项目-重点

```

day14-项目-重点

01-基础-vuex-actions 和 mapActions

state:声明数据->组件的计算属性

getters:声明复杂数据->组件的计算属性

mutations:修改state的方法(同步方法)->组件的methods

actions:异步方法(和后台交互->ajax)

  // 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代码

说明:豆瓣电影的接口

1. 接口文档打不开了
2. 接口依然好用->知道了请求的url->发请求
3. 支持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-豆瓣电影-准备代码分析

1. movielist.vue列表
2. moviedetail.vue详情
3. router/index.js路由配置完毕

06-案例-vuex-豆瓣电影-安装第三方资源

[email protected]

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

1. 发送jsonp请求
2. 在请求有结果的位置,把结果交给mutations

    // 之前:->store->state>title
    // 现在:->store>modules->state->title

1. 在数据管理模块movielist.js开启空间namespaced:true
2. 使用 ...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-豆瓣电影-详情-配置路由

在列表组件,点击图片->进入详情

<router-link :to="{name:'moviedetail',params:{id:item.id}}">

14-案例-vuex-豆瓣电影-详情-渲染数据

列表组件->列表数据管理模块

详情组件->详情数据管理模块

15-基础-webpack-介绍

vuecli工具内置webpack工具

webpack:模块打包机(处理项目中各种资源->经过webpack打包->不同的模块)

模块化所解决的问题:

1. 文件依赖(index.html src="a.js" src="b.js")
2. 全局变量(a.js声明变量var sum=10,b.js var sum = 20;)

思考:webpack出现之前:js模块化问题怎么解决?

扩展

1. js能做的事儿->表单->不需要考虑模块化
2. ajax和后台交互->代码多->js需要模块化
3. 函数自调(function(){函数源码})()->a.js
4. 闭包->解决问题->全局变量被污染
5. 2009 node出现了->js开发后台->逻辑复杂->js必须模块化
6. 规定/标准/思想->Common.js/AMD/CMD->js代码怎么写才是模块
7. require.js/sea.js等->编程层面->define("A")->require("a.js")
8. ES6->import和export
9. webpack->目前的终极模块化解决方案->痛点->配置繁琐(主流)
10. parcel零配置模块化解决方案(国外+国内创业用的比较多)

16-基础-webpack-本地安装

前提:需要安装node

1. 本地(推荐):每个项目使用自己的配置
2. 全局:每个不同的项目使用的同一个配置(不合理) -g

npm init -y
npm install --save-dev webpack
npm install --save-dev webpack-cli
// 结果:可以在当前目录下使用webpack指令
webpack+回车
// webpack的使用:需要告诉webpack要打包的文件,把该文件打包什么样

17-基础-webpack-目录设置

1. index.html用户入口
2. src
   1. main.js 入口
   2. cal.js 非入口文件
3. 在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-清空

1. CleanWebpackPlugin 清空dist
2. HtmlWebpackPlugin生成.html文件(template)

23-基础-webpack-sourceMap-服务器

1. SourceMap->调试bug
2. webpack-dev-server->测试服务器->package.json->自定义指令->start->npm run start

建议:

1. 路还很长:需要慢慢走(一直学)
2. 学得快:(基本功c基础+算法数据结构(绕不开:大厂面试必问+前两年可以不看))

```