qq强制聊天网站源码,怎么进入微信官方网站,智能小程序开发哪家好,云建站的步骤Vue学习笔记
一、自定义创建项目
基于VueCli自定义创建项目架子
二、vuex基本认知
1、vuex概述
是什么#xff1a;是vue的状态管理工具#xff08;插件#xff09;#xff0c;状态就是数据 大白话#xff1a;vuex是一个插件#xff0c;可以帮助我们管理vue通用的数…Vue学习笔记
一、自定义创建项目
基于VueCli自定义创建项目架子
二、vuex基本认知
1、vuex概述
是什么是vue的状态管理工具插件状态就是数据 大白话vuex是一个插件可以帮助我们管理vue通用的数据多组件共享的数据
2、应用场景
某个状态在很多个组件都使用如个人信息 多个组件共同维护一份数据购物车
3、优势
共同维护同一份数据数据集中化管理 响应式变化 操作简捷vuex提供了一些辅助函数
三、vuex的应用
1、构建vuex环境
效果是三个组件共享一份数据
任意一个组件都可以修改数据三个组件的数据是同步的
2、创建一个空仓库
目标安装vuex插件初始化一个空仓库 步骤
安装vuexyarn add vue3–npm?新建vuex模块文件新建store/index.js专门存放vuex创建仓库 插件安装Vue.use(Vuex)创建仓库new Vuex.Store() 导出给main.js使用export default storemain.js导入挂载在main.js中导入挂载到Vue实例上
3、如何提供访问vuex数据
提供数据 State提供唯一的公共数据源所有共享的数据都要统一放到Store中的State中存储。在state对象中可以添加我们要共享的数据使用数据 通过store直接访问 获取store1this.$store2import导入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同样遵循单向数据流组件中不能直接修改仓库的数据 stricttrue在创建的仓库中开启严格模式在组件中直接修改仓库数据时会报错
1mutation修改数据
修改仓库中的数据通过mutations 仓库中封装mutation函数–页面中commit调用
//store/index.js修改
const store new Vue.Store({strict:true,state:{title:仓库大标题,count:100},mutations:{//所有mutation函数第一个参数都是stateaddCount(state){state.count1},changeTitle(state){state.title仓库新标题}}
})
//组件中调用
methods:{handleAdd(){this.$store.commit(addCount)}
}2mutation传参
//store/index.js修改
const store new Vue.Store({strict:true,state:{title:仓库大标题,count:100},mutations:{//所有mutation函数第一个参数都是stateaddCount(state,n){state.countn},changeTitle(state,newTitle){state.title newTitle}}
})
//组件中调用
methods:{handleAdd(n){this.$store.commit(addCount,10)}
}3与input配合
给input添加:valuecount属性已经利用了辅助函数mapState的前提下可以直接使用count此操作后count改变input输入框内的值也跟着改变给input添加input‘handleChange’并给组件添加methods函数handleChange在仓库中封装mutation处理函数在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)}
}
或不需要封装直接在页面中使用
clicksubCount(1)四、actions
1、actions应用
需求一秒钟之后修改state的count成666mutations必须是同步的 不能直接操作state如果想要操作state还是需要commit mutation
提供action方法
actions:{action名字(context,num){setTimeout((){context.commit(mutation名字,num)},1000)}
}页面中dispatch调用
this.$store.dispatch(action名字,200)2、辅助函数mapActions
把位于actions中的方法提取了出来映射到组件methods中 步骤 1.导入mapActionsimport {mapActions} from ‘vuex’ 2.数据方式引入mapActions([‘actions名字’]) 3.使用
methods:{...mapActions([actions名字]),methods名字(参数){this.actions名字(参数)}
}
或不需要封装直接在页面中使用
clickactions名字(参数)五、getters
除了state之外有时我们还需要从state中派生出一些状态从state中提取出一些符合特定规则的数据这些状态是依赖state的此时会用到getters。
定义getters
getters:{
//1.形参第一个参数必须是state
//2.必须有返回值返回值就是getters的值filterList(state){return state.list.filter(itemitem5)}
}注意 1getters函数的第一个参数是state 2getters函数必须要有返回值 2. 访问getters 1通过store访问getters
{{ $store.getters.filterList }}2通过辅助函数mapGetters映射 步骤 1.导入mapGettersimport {mapGetters} from ‘vuex’ 2.数据方式引入mapGetters([‘getters名字’]) 3.使用
computed:{...mapGetters([filterList])
},
{{ filterList }}使用mapState和mapGetters都是映射属性的mapMutations和mapActions都是用来映射方法的
六、模块module
1、初始设置
由于vuex使用单一状态数应用的所有状态会集中到一个比较大的对象当应用变得非常复杂时store对象就有可能变得相当臃肿。当项目越来越大时vuex就会变得难以维护。 模块拆分语法
新建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 storenew Vue.Store({modules:{模块名}
})2、访问state
子模块的状态会挂到根级别的state中属性名就是模块名 访问方法
直接通过模块名访问$store.state.模块名.xxx通过mapState映射 默认根级别的映射mapState([‘模块名’])–使用{{ 模块名.xxx.xxx }}子模块的映射开启命名空间namespaced:true在模块名.js中的export default(导出部分)中子模块的映射mapState(‘模块名’,[‘xxx’])–使用{{ xxx }}
3、模块中的getters中的数据
直接通过模块名访问$store.getters[模块名/xxx]通过mapGetters映射 默认根级别的映射mapGetters([‘模块名’])子模块的映射mapGetters(‘模块名’,[‘xxx’])也需要开启命名空间
4、模块中mutation的调用
context上下文默认提交的就是自己模块的action和mutation 注意默认模块中的mutation和action会被挂载到全局需要开启命名空间才会被挂载到子模块 调用模块中的mutation
$store.commit(‘模块名/xxx’,额外参数)通过mapMutations映射 默认根级别的映射 mapMutations([‘xxx’])子模块的映射mapMutations(‘模块名’,[‘xxx’])也需要开启命名空间
5、模块中actions的调用
调用模块中的mutation
$store.dispatch(‘模块名/xxx’,额外参数)通过mapActions映射 默认根级别的映射 mapActions([‘xxx’])子模块的映射mapActions(‘模块名’,[‘xxx’])也需要开启命名空间
七、符合企业规范的目录
删除多余文件目录下原有的一些多余文件修改路由配置和App.vue原路由配置清空/App.vue中只留一个路由出口新增两个目录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-vue7.20.0//降低一下npm版本 npm i vantlatest-v2 -S 自动按需引入组件
安装 npm i babel-plugin-import -D 添加配置
// 在 babel.config.js 中配置
module.exports {plugins: [[import, {libraryName: vant,libraryDirectory: es,style: true}, vant]]
};在页面中引入vant组件
import { Button } from vant;九、项目中的vw适配
目标基于postcss插件实现项目vw适配px自动转换为vw 步骤
安装插件 npm install postcss-px-to-viewport1.1.1 -D postcss配置
// postcss.config.js
module.exports {plugins: {postcss-px-to-viewport: {viewportWidth: 375,},},
};vw适配的标准屏的宽度 iphoneX 设计图750调成1倍适配375标准屏幕 设计图640调成1倍适配320标准屏幕
