網(wǎng)站301是什么意思人民網(wǎng)疫情最新消息
Vue學(xué)習(xí)筆記
一、自定義創(chuàng)建項(xiàng)目
基于VueCli自定義創(chuàng)建項(xiàng)目架子
二、vuex基本認(rèn)知
1、vuex概述
是什么:是vue的狀態(tài)管理工具(插件),狀態(tài)就是數(shù)據(jù)
大白話:vuex是一個(gè)插件,可以幫助我們管理vue通用的數(shù)據(jù)(多組件共享的數(shù)據(jù))
2、應(yīng)用場(chǎng)景
某個(gè)狀態(tài)在很多個(gè)組件都使用(如個(gè)人信息)
多個(gè)組件共同維護(hù)一份數(shù)據(jù)(購(gòu)物車(chē))
3、優(yōu)勢(shì)
共同維護(hù)同一份數(shù)據(jù),數(shù)據(jù)集中化管理
響應(yīng)式變化
操作簡(jiǎn)捷(vuex提供了一些輔助函數(shù))
三、vuex的應(yīng)用
1、構(gòu)建vuex環(huán)境
效果是三個(gè)組件共享一份數(shù)據(jù):
- 任意一個(gè)組件都可以修改數(shù)據(jù)
- 三個(gè)組件的數(shù)據(jù)是同步的
2、創(chuàng)建一個(gè)空倉(cāng)庫(kù)
目標(biāo):安裝vuex插件,初始化一個(gè)空倉(cāng)庫(kù)
步驟:
- 安裝vuex(yarn add vue3–>npm?)
- 新建vuex模塊文件(新建store/index.js專門(mén)存放vuex)
- 創(chuàng)建倉(cāng)庫(kù)
- 插件安裝Vue.use(Vuex)
- 創(chuàng)建倉(cāng)庫(kù)new Vuex.Store()
- 導(dǎo)出給main.js使用(export default store)
- main.js導(dǎo)入掛載(在main.js中導(dǎo)入掛載到Vue實(shí)例上)
3、如何提供&訪問(wèn)vuex數(shù)據(jù)
- 提供數(shù)據(jù)
State提供唯一的公共數(shù)據(jù)源,所有共享的數(shù)據(jù)都要統(tǒng)一放到Store中的State中存儲(chǔ)。在state對(duì)象中可以添加我們要共享的數(shù)據(jù) - 使用數(shù)據(jù)
- 通過(guò)store直接訪問(wèn)
獲取store:(1)this.$store(2)import導(dǎo)入store
模板中:{{ $store.state.xxx }}
組件邏輯中:this.$store.state.xxx
JS模塊中:store.state.xxx
- 通過(guò)輔助函數(shù)(簡(jiǎn)化)
mapState是輔助函數(shù),幫助我們把store中的數(shù)據(jù)自動(dòng)映射到組件的計(jì)算屬性中
步驟:
1.導(dǎo)入mapState (import {mapState} from ‘vuex’)
2.數(shù)據(jù)方式引入state (masState([‘count’]))
3.展開(kāi)運(yùn)算符映射
- 通過(guò)store直接訪問(wèn)
computed:{...mapState(['count'])
}
4、修改數(shù)據(jù)
vuex同樣遵循單向數(shù)據(jù)流,組件中不能直接修改倉(cāng)庫(kù)的數(shù)據(jù)
strict:true
(在創(chuàng)建的倉(cāng)庫(kù)中)開(kāi)啟嚴(yán)格模式,在組件中直接修改倉(cāng)庫(kù)數(shù)據(jù)時(shí)會(huì)報(bào)錯(cuò)
(1)mutation修改數(shù)據(jù)
修改倉(cāng)庫(kù)中的數(shù)據(jù)通過(guò)mutations
倉(cāng)庫(kù)中封裝mutation函數(shù)–>頁(yè)面中commit調(diào)用
//store/index.js修改
const store = new Vue.Store({strict:true,state:{title:'倉(cāng)庫(kù)大標(biāo)題',count:100},mutations:{//所有mutation函數(shù),第一個(gè)參數(shù)都是stateaddCount(state){state.count+=1},changeTitle(state){state.title='倉(cāng)庫(kù)新標(biāo)題'}}
})
//組件中調(diào)用
methods:{handleAdd(){this.$store.commit('addCount')}
}
(2)mutation傳參
//store/index.js修改
const store = new Vue.Store({strict:true,state:{title:'倉(cāng)庫(kù)大標(biāo)題',count:100},mutations:{//所有mutation函數(shù),第一個(gè)參數(shù)都是stateaddCount(state,n){state.count+=n},changeTitle(state,newTitle){state.title = newTitle}}
})
//組件中調(diào)用
methods:{handleAdd(n){this.$store.commit('addCount',10)}
}
(3)與input配合
- 給input添加
:value='count'
屬性(已經(jīng)利用了輔助函數(shù)mapState的前提下可以直接使用count),此操作后count改變input輸入框內(nèi)的值也跟著改變 - 給input添加@input=‘handleChange’,并給組件添加methods函數(shù)handleChange
- 在倉(cāng)庫(kù)中封裝mutation處理函數(shù)
- 在handleChange中調(diào)用傳參 this.$store.commit(‘mutation中的函數(shù)名’,參數(shù))
(4)輔助函數(shù)mapMutations
與mapState原理相似,可以將mutations中的方法提取出來(lái),映射都組件methods中
步驟:
1.導(dǎo)入mapMutations (import {mapMutations} from ‘vuex’)
2.數(shù)據(jù)方式引入(mapMutations([‘subCount’]))
3.使用
methods:{...mapMutations(['subCount']),handleAdd(n){this.subCount(n)}
}
或不需要封裝,直接在頁(yè)面中使用
@click='subCount(1)'
四、actions
1、actions應(yīng)用
需求:一秒鐘之后,修改state的count成666(mutations必須是同步的)
不能直接操作state,如果想要操作state還是需要commit mutation
- 提供action方法
actions:{action名字(context,num){setTimeout(()=>{context.commit('mutation名字',num)},1000)}
}
- 頁(yè)面中dispatch調(diào)用
this.$store.dispatch('action名字',200)
2、輔助函數(shù)mapActions
把位于actions中的方法提取了出來(lái),映射到組件methods中
步驟:
1.導(dǎo)入mapActions(import {mapActions} from ‘vuex’)
2.數(shù)據(jù)方式引入(mapActions([‘a(chǎn)ctions名字’]))
3.使用
methods:{...mapActions(['actions名字']),methods名字(參數(shù)){this.actions名字(參數(shù))}
}
或不需要封裝,直接在頁(yè)面中使用
@click='actions名字(參數(shù))'
五、getters
除了state之外,有時(shí)我們還需要從state中派生出一些狀態(tài)(從state中提取出一些符合特定規(guī)則的數(shù)據(jù)),這些狀態(tài)是依賴state的,此時(shí)會(huì)用到getters。
- 定義getters
getters:{
//1.形參第一個(gè)參數(shù)必須是state
//2.必須有返回值,返回值就是getters的值filterList(state){return state.list.filter(item=>item>5)}
}
注意:
(1)getters函數(shù)的第一個(gè)參數(shù)是state
(2)getters函數(shù)必須要有返回值
2. 訪問(wèn)getters
(1)通過(guò)store訪問(wèn)getters
{{ $store.getters.filterList }}
(2)通過(guò)輔助函數(shù)mapGetters映射
步驟:
1.導(dǎo)入mapGetters(import {mapGetters} from ‘vuex’)
2.數(shù)據(jù)方式引入(mapGetters([‘getters名字’]))
3.使用
computed:{...mapGetters(['filterList'])
},
{{ filterList }}使用
mapState和mapGetters都是映射屬性的,mapMutations和mapActions都是用來(lái)映射方法的
六、模塊module
1、初始設(shè)置
由于vuex使用單一狀態(tài)數(shù),應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象,當(dāng)應(yīng)用變得非常復(fù)雜時(shí),store對(duì)象就有可能變得相當(dāng)臃腫。當(dāng)項(xiàng)目越來(lái)越大時(shí),vuex就會(huì)變得難以維護(hù)。
模塊拆分語(yǔ)法:
- 新建store/module/模塊名.js,每個(gè)模塊都有自己的四個(gè)核心概念(state、mutation、action、getter)
//各個(gè)模塊名.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、訪問(wèn)state
子模塊的狀態(tài)會(huì)掛到根級(jí)別的state中,屬性名就是模塊名
訪問(wèn)方法
- 直接通過(guò)模塊名訪問(wèn)
$store.state.模塊名.xxx
- 通過(guò)mapState映射
- 默認(rèn)根級(jí)別的映射:mapState([‘模塊名’])–>使用{{ 模塊名.xxx.xxx }}
- 子模塊的映射:開(kāi)啟命名空間
namespaced:true
(在模塊名.js中的export default(導(dǎo)出部分)中),子模塊的映射mapState(‘模塊名’,[‘xxx’])–>使用{{ xxx }}
3、模塊中的getters中的數(shù)據(jù)
- 直接通過(guò)模塊名訪問(wèn)
$store.getters['模塊名/xxx']
- 通過(guò)mapGetters映射
- 默認(rèn)根級(jí)別的映射mapGetters([‘模塊名’])
- 子模塊的映射mapGetters(‘模塊名’,[‘xxx’]),也需要開(kāi)啟命名空間
4、模塊中mutation的調(diào)用
context上下文,默認(rèn)提交的就是自己模塊的action和mutation
注意:默認(rèn)模塊中的mutation和action會(huì)被掛載到全局,需要開(kāi)啟命名空間,才會(huì)被掛載到子模塊
調(diào)用模塊中的mutation:
- $store.commit(‘模塊名/xxx’,額外參數(shù))
- 通過(guò)mapMutations映射
- 默認(rèn)根級(jí)別的映射 mapMutations([‘xxx’])
- 子模塊的映射mapMutations(‘模塊名’,[‘xxx’]),也需要開(kāi)啟命名空間
5、模塊中actions的調(diào)用
調(diào)用模塊中的mutation:
- $store.dispatch(‘模塊名/xxx’,額外參數(shù))
- 通過(guò)mapActions映射
- 默認(rèn)根級(jí)別的映射 mapActions([‘xxx’])
- 子模塊的映射mapActions(‘模塊名’,[‘xxx’]),也需要開(kāi)啟命名空間
七、符合企業(yè)規(guī)范的目錄
- 刪除多余文件(目錄下原有的一些多余文件)
- 修改路由配置和App.vue(原路由配置清空/App.vue中只留一個(gè)路由出口)
- 新增兩個(gè)目錄api/utils
- api接口模塊:發(fā)送ajax請(qǐng)求的接口模塊
- utils工具模塊:自己封裝的一些工具方法模塊
八、vant組件庫(kù)的按需導(dǎo)入導(dǎo)出
組件庫(kù):第三方封裝好了很多組件,整合到一起就是一個(gè)組件庫(kù)
https://develop365.gitlab.io/vant/v2/zh-CN/home/
安裝vant組件庫(kù)
Vue 3 項(xiàng)目,安裝最新版 Vant:
npm i vant -S
Vue 2 項(xiàng)目,安裝 Vant 2:
npm install eslint-plugin-vue@7.20.0//降低一下npm版本
npm i vant@latest-v2 -S
自動(dòng)按需引入組件
- 安裝
npm i babel-plugin-import -D
- 添加配置
// 在 babel.config.js 中配置
module.exports = {plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]
};
- 在頁(yè)面中引入vant組件
import { Button } from 'vant';
九、項(xiàng)目中的vw適配
目標(biāo):基于postcss插件實(shí)現(xiàn)項(xiàng)目vw適配(px自動(dòng)轉(zhuǎn)換為vw)
步驟:
- 安裝插件
npm install postcss-px-to-viewport@1.1.1 -D
- postcss配置
// postcss.config.js
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375,},},
};
vw適配的標(biāo)準(zhǔn)屏的寬度 iphoneX
設(shè)計(jì)圖750,調(diào)成1倍=>適配375標(biāo)準(zhǔn)屏幕
設(shè)計(jì)圖640,調(diào)成1倍=>適配320標(biāo)準(zhǔn)屏幕