Vue学习笔记4

Vue学习笔记

一、自定义创建项目

基于VueCli自定义创建项目架子

二、vuex基本认知

1、vuex概述

是什么：是vue的状态管理工具（插件），状态就是数据
大白话：vuex是一个插件，可以帮助我们管理vue通用的数据（多组件共享的数据）

2、应用场景

某个状态在很多个组件都使用（如个人信息）
多个组件共同维护一份数据（购物车）

3、优势

共同维护同一份数据，数据集中化管理
响应式变化
操作简捷（vuex提供了一些辅助函数）

三、vuex的应用

1、构建vuex环境

效果是三个组件共享一份数据：

• 任意一个组件都可以修改数据
• 三个组件的数据是同步的

2、创建一个空仓库

目标：安装vuex插件，初始化一个空仓库
步骤：

1. 安装vuex（yarn add vue3–>npm?）
2. 新建vuex模块文件（新建store/index.js专门存放vuex）
3. 创建仓库
   • 插件安装Vue.use(Vuex)
   • 创建仓库new Vuex.Store()
4. 导出给main.js使用（export default store）
5. main.js导入挂载（在main.js中导入挂载到Vue实例上）

3、如何提供&访问vuex数据

1. 提供数据
   State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储。在state对象中可以添加我们要共享的数据
2. 使用数据
   • 通过store直接访问
     获取store：（1）this.$store（2）import导入store
     模板中：{{ $store.state.xxx }} 组件逻辑中：this.$store.state.xxx JS模块中：store.state.xxx
   • 通过辅助函数（简化）
     mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中
     步骤：
     1.导入mapState （import {mapState} from ‘vuex’）
     2.数据方式引入state （masState([‘count’])）
     3.展开运算符映射

computed:{
	...mapState(['count'])
}

4、修改数据

vuex同样遵循单向数据流，组件中不能直接修改仓库的数据
strict：true（在创建的仓库中）开启严格模式，在组件中直接修改仓库数据时会报错

（1）mutation修改数据

修改仓库中的数据通过mutations
仓库中封装mutation函数–>页面中commit调用

//store/index.js修改
const store = new Vue.Store({
	strict:true,
	state:{
		title:'仓库大标题',
		count:100
	},
	mutations:{
	//所有mutation函数，第一个参数都是state
		addCount(state){
			state.count+=1
		},
		changeTitle(state){
			state.title='仓库新标题'
		}
	}
})
//组件中调用
methods:{
	handleAdd(){
		this.$store.commit('addCount')
	}
}

（2）mutation传参

//store/index.js修改
const store = new Vue.Store({
	strict:true,
	state:{
		title:'仓库大标题',
		count:100
	},
	mutations:{
	//所有mutation函数，第一个参数都是state
		addCount(state,n){
			state.count+=n
		},
		changeTitle(state,newTitle){
			state.title = newTitle
		}
	}
})
//组件中调用
methods:{
	handleAdd(n){
		this.$store.commit('addCount',10)
	}
}

（3）与input配合

1. 给input添加:value='count'属性（已经利用了辅助函数mapState的前提下可以直接使用count），此操作后count改变input输入框内的值也跟着改变
2. 给input添加@input=‘handleChange’，并给组件添加methods函数handleChange
3. 在仓库中封装mutation处理函数
4. 在handleChange中调用传参 this.$store.commit(‘mutation中的函数名’,参数)

（4）辅助函数mapMutations

与mapState原理相似，可以将mutations中的方法提取出来，映射都组件methods中
步骤：
1.导入mapMutations （import {mapMutations} from ‘vuex’）
2.数据方式引入（mapMutations([‘subCount’])）
3.使用

methods:{
	...mapMutations(['subCount']),
	handleAdd(n){
		this.subCount(n)
	}
}
或不需要封装，直接在页面中使用
@click='subCount(1)'

四、actions

1、actions应用

需求：一秒钟之后，修改state的count成666（mutations必须是同步的）
不能直接操作state，如果想要操作state还是需要commit mutation

1. 提供action方法

actions:{
	action名字(context,num){
		setTimeout(()=>{
			context.commit('mutation名字',num)
		},1000)
	}
}

2. 页面中dispatch调用

this.$store.dispatch('action名字',200)

2、辅助函数mapActions

把位于actions中的方法提取了出来，映射到组件methods中
步骤：
1.导入mapActions（import {mapActions} from ‘vuex’）
2.数据方式引入（mapActions([‘actions名字’])）
3.使用

methods:{
	...mapActions(['actions名字']),
	methods名字(参数){
		this.actions名字(参数)
	}
}
或不需要封装，直接在页面中使用
@click='actions名字(参数)'

五、getters

除了state之外，有时我们还需要从state中派生出一些状态（从state中提取出一些符合特定规则的数据），这些状态是依赖state的，此时会用到getters。

1. 定义getters

getters:{
//1.形参第一个参数必须是state
//2.必须有返回值，返回值就是getters的值
	filterList(state){
		return state.list.filter(item=>item>5)
	}
}

注意：
（1）getters函数的第一个参数是state
（2）getters函数必须要有返回值
2. 访问getters
（1）通过store访问getters

{{ $store.getters.filterList }}

（2）通过辅助函数mapGetters映射
步骤：
1.导入mapGetters（import {mapGetters} from ‘vuex’）
2.数据方式引入（mapGetters([‘getters名字’])）
3.使用

computed:{
	...mapGetters(['filterList'])
},
{{ filterList }}使用

mapState和mapGetters都是映射属性的，mapMutations和mapActions都是用来映射方法的

六、模块module

1、初始设置

由于vuex使用单一状态数，应用的所有状态会集中到一个比较大的对象，当应用变得非常复杂时，store对象就有可能变得相当臃肿。当项目越来越大时，vuex就会变得难以维护。
模块拆分语法：

1. 新建store/module/模块名.js，每个模块都有自己的四个核心概念（state、mutation、action、getter）

//各个模块名.js中
const state(){}
const mutations(){}
const action(){}
const getter(){}
export default{
	state,
	mutations,
	action,
	getter,
}
//index.js中
import 模块名 ftom
const store=new Vue.Store({
	modules:{
		模块名
	}
})

2、访问state

子模块的状态会挂到根级别的state中，属性名就是模块名
访问方法

1. 直接通过模块名访问$store.state.模块名.xxx
2. 通过mapState映射
   • 默认根级别的映射：mapState([‘模块名’])–>使用{{ 模块名.xxx.xxx }}
   • 子模块的映射：开启命名空间namespaced:true（在模块名.js中的export default(导出部分)中），子模块的映射mapState(‘模块名’,[‘xxx’])–>使用{{ xxx }}

3、模块中的getters中的数据

1. 直接通过模块名访问$store.getters['模块名/xxx']
2. 通过mapGetters映射
   • 默认根级别的映射mapGetters([‘模块名’])
   • 子模块的映射mapGetters(‘模块名’,[‘xxx’])，也需要开启命名空间

4、模块中mutation的调用

context上下文，默认提交的就是自己模块的action和mutation
注意：默认模块中的mutation和action会被挂载到全局，需要开启命名空间，才会被挂载到子模块
调用模块中的mutation：

1. $store.commit(‘模块名/xxx’,额外参数)
2. 通过mapMutations映射
   • 默认根级别的映射 mapMutations([‘xxx’])
   • 子模块的映射mapMutations(‘模块名’,[‘xxx’])，也需要开启命名空间

5、模块中actions的调用

调用模块中的mutation：

1. $store.dispatch(‘模块名/xxx’,额外参数)
2. 通过mapActions映射
   • 默认根级别的映射 mapActions([‘xxx’])
   • 子模块的映射mapActions(‘模块名’,[‘xxx’])，也需要开启命名空间

七、符合企业规范的目录

1. 删除多余文件（目录下原有的一些多余文件）
2. 修改路由配置和App.vue（原路由配置清空/App.vue中只留一个路由出口）
3. 新增两个目录api/utils
   • api接口模块：发送ajax请求的接口模块
   • utils工具模块：自己封装的一些工具方法模块

八、vant组件库的按需导入导出

组件库：第三方封装好了很多组件，整合到一起就是一个组件库
https://develop365.gitlab.io/vant/v2/zh-CN/home/
安装vant组件库

Vue 3 项目，安装最新版 Vant：
npm i vant -S
Vue 2 项目，安装 Vant 2：
npm install eslint-plugin-vue@7.20.0//降低一下npm版本
npm i vant@latest-v2 -S

自动按需引入组件

1. 安装

npm i babel-plugin-import -D

2. 添加配置

// 在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

3. 在页面中引入vant组件

import { Button } from 'vant';

九、项目中的vw适配

目标：基于postcss插件实现项目vw适配（px自动转换为vw）
步骤：

1. 安装插件

npm install postcss-px-to-viewport@1.1.1 -D

2. postcss配置

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

vw适配的标准屏的宽度 iphoneX
设计图750，调成1倍=>适配375标准屏幕
设计图640，调成1倍=>适配320标准屏幕