vue是根據(jù)數(shù)據(jù)來構(gòu)建用戶界面的一套框架

創(chuàng)建一個(gè)vue實(shí)例

<!--
1.創(chuàng)建一個(gè)容器
2.引入vue.js開發(fā)版本（全局的）
3.創(chuàng)建實(shí)例對(duì)象
4.配置選項(xiàng) => 完成渲染
-->
<div id="app">{{ msg }}
</div>
<script src='vue.js'></script>
<script>const app = new Vue({el:"#app",data:{msg: 'hello vue'}})
</script>

插值表達(dá)式 {{ }}

利用表達(dá)式進(jìn)行插值，渲染到頁面。所謂表達(dá)式就是有結(jié)果的一段代碼。

語法：{{ 表達(dá)式 }}

注意：
1.使用的數(shù)據(jù)必須存在（data）
2.標(biāo)簽屬性中不能使用

vue指令

指令：帶有v-前綴的特殊標(biāo)簽屬性

動(dòng)態(tài)的解析標(biāo)簽：v-html=“表達(dá)式”->innerHTML

v-show和v-if

作用：控制元素的顯示和隱藏
v-show=“true/false”，使用display:none實(shí)現(xiàn)的，頻繁切換顯示隱藏的場(chǎng)景
v-if=“true/false”，通過判斷條件來創(chuàng)建或移除元素節(jié)點(diǎn)，要么顯示要么隱藏不頻繁切換的場(chǎng)景

v-else和v-else-if

作用：輔助v-if進(jìn)行判斷渲染

v-on

作用：注冊(cè)事件 = 添加監(jiān)聽 + 提供處理邏輯
語法：
v-on：事件名=“內(nèi)聯(lián)語句”
v-on：事件名=“methods中的函數(shù)名”
@事件名= “ ”
注意：methods里的函數(shù)的this指向創(chuàng)建的實(shí)例，如果要傳參數(shù)這樣寫：@click=“fn(參數(shù)1,參數(shù)2)”

v-bind

作用：動(dòng)態(tài)的設(shè)置html的標(biāo)簽屬性 -> src url title…
語法：v-bind:屬性名=“表達(dá)式”，有省略的寫法 :屬性名=“表達(dá)式”

v-for

作用：基于數(shù)據(jù)循環(huán)，多次渲染整個(gè)元素 - > 數(shù)組、對(duì)象、數(shù)字…
語法：v-for=“(item每一項(xiàng),index下標(biāo)) in 數(shù)組”

v-for里面的key，給列表項(xiàng)添加的唯一標(biāo)識(shí)符，便于vue進(jìn)行列表項(xiàng)的正確排序復(fù)用
:key=“唯一標(biāo)識(shí)符”

v-model

作用：給表單元素使用，雙向數(shù)據(jù)綁定 -> 可以快速獲取或者設(shè)置表單元素內(nèi)容
v-model = '變量‘

指令修飾符

通過 “.” 指明一些指令后綴，不同后綴封裝了不同的處理操作 -> 簡化代碼
eg:
@keyup.enter 鍵盤回車監(jiān)聽
v-model.trim 去除首位空格
v-model.number 轉(zhuǎn)數(shù)字
@事件名.stop 阻止冒泡
@事件名.prevent 阻止默認(rèn)行為

v-bind對(duì)于樣式控制的增強(qiáng) - 操作class
:class=“對(duì)象/數(shù)組”
對(duì)象：鍵是類名，值為true有這個(gè)類，否則沒有這個(gè)類

<div class="box" :class="{類名1: 布爾值，類名2: 布爾值}"></div>

數(shù)組：數(shù)組中所有的類，都會(huì)添加到盒子上，本質(zhì)上就是一個(gè)class列表

<div class="box" :class="[類名1，類名2]"></div>

計(jì)算屬性

基于現(xiàn)有的數(shù)據(jù)，計(jì)算出來的新屬性。依賴的數(shù)據(jù)發(fā)生變化，自動(dòng)重新計(jì)算。

computed: {計(jì)算屬性名 () {//基于現(xiàn)有的數(shù)據(jù)，編寫求值邏輯return 結(jié)果}
}

computed計(jì)算屬性 vs methods方法

computed 計(jì)算屬性：封裝了一段對(duì)數(shù)據(jù)的處理，求得一個(gè)結(jié)果

• 寫在 computed 配置項(xiàng)中
• 作為屬性，直接使用 -> this.計(jì)算屬性 {{ 計(jì)算屬性 }}

methods 方法：給實(shí)例提供一個(gè)方法，調(diào)用以處理業(yè)務(wù)邏輯

• 寫在methods 配置項(xiàng)中
• 作為方法，需要調(diào)用 -> this.方法名() {{ 方法名() }} @事件名=“方法名”

計(jì)算屬性完整寫法

計(jì)算屬性默認(rèn)簡寫，只能讀取訪問，不能修改，要修改需要寫計(jì)算屬性的完整寫法

computed: {計(jì)算屬性名: {get() {一段代碼邏輯（計(jì)算邏輯）return 結(jié)果},set(修改的值) {//當(dāng)計(jì)算屬性的值被修改時(shí)，實(shí)行set 一段代碼邏輯（修改邏輯）}}
}

watch偵聽器（監(jiān)視器）

作用：監(jiān)視數(shù)據(jù)變化，執(zhí)行一些業(yè)務(wù)邏輯或者異步操作
簡單寫法-簡單類型數(shù)據(jù)，直接監(jiān)視

data: {words: '蘋果'，obj: {words: '蘋果'}
},watch: {//該方法會(huì)在數(shù)據(jù)變化時(shí)，觸發(fā)執(zhí)行oldValue一般不用，只有一個(gè)newValue數(shù)據(jù)屬性名 (newValue,oldValue) {一些業(yè)務(wù)邏輯 或 異步操作},'對(duì)象.屬性名'(newValue,oldValue) {一些業(yè)務(wù)邏輯 或 異步操作}
}

完整寫法 -> 添加額外配置項(xiàng)
（1）deep: true 對(duì)復(fù)雜類型深度監(jiān)視
（2）immediate：true 初始化立刻執(zhí)行一次handler方法

data: {obj: {words: '蘋果'lang: 'italy'},
},watch: {對(duì)象名: {deep: true,immediate: true, //初始化就立即執(zhí)行，不必等到數(shù)據(jù)變化handler (newValue) {console.log(newValue)}}
}

Vue生命周期和生命周期的四個(gè)階段

vue生命周期：一個(gè)vue實(shí)例從創(chuàng)建到銷毀的整個(gè)過程

階段：

1. 創(chuàng)建階段：準(zhǔn)備響應(yīng)式數(shù)據(jù)，之后就可以請(qǐng)求后臺(tái)的數(shù)據(jù)了
2. 掛載階段：渲染模板
3. 更新階段：修改數(shù)據(jù)，更新視圖，這里可以循環(huán)進(jìn)行
4. 銷毀階段：銷毀

生命周期函數(shù)（鉤子函數(shù)）

概念：vue生命周期過程中，會(huì)自動(dòng)運(yùn)行一些函數(shù) -> 讓開發(fā)者可以在特定階段運(yùn)行自己的代碼

工程化開發(fā)和腳手架

傳統(tǒng)核心包開發(fā)模式：基于html、css、js文件，開發(fā)vue
工程化開發(fā)模式：基于構(gòu)建工具（如webpack）的環(huán)境中開發(fā)vue
vue CLI是vue官方的一個(gè)全局命令工具，可以幫我們快速創(chuàng)建一個(gè)開發(fā)vue項(xiàng)目的標(biāo)準(zhǔn)化基礎(chǔ)架子（webpack配置 ）
使用步驟：

1. 根據(jù)官方安裝CLI
2. 檢查vue版本：vue -version
3. 創(chuàng)建項(xiàng)目架子：vue create project-name
4. 啟動(dòng)項(xiàng)目：npm run serve

腳手架目錄文件&項(xiàng)目運(yùn)行流程

目錄文件的截圖
項(xiàng)目運(yùn)行流程：npm run開始啟動(dòng)項(xiàng)目，之后加載 main.js，該js文件將app.vue（這個(gè)就是一開始學(xué)習(xí)寫在標(biāo)簽里的模板）根組件渲染到 index.html 容器中展示頁面。

//文件核心作用：導(dǎo)入App.vue，基于App.vue創(chuàng)建結(jié)構(gòu)渲染index.html
//1、導(dǎo)入 Vue 核心包
import Vue from 'vue'
//2、導(dǎo)入 App.vue 根組件
import App from './App.vue'
//提示：當(dāng)前處于什么狀態(tài)（生產(chǎn)環(huán)境/開發(fā)環(huán)境）
Vue.config.productionTip = false
//1、Vue實(shí)例化。提供render方法 基于App.vue創(chuàng)建結(jié)構(gòu)渲染index.html
new Vue({render: h => h(App),
}).$mount('#app')//這一行的效果相當(dāng)于 el: '#app'

組件化開發(fā)&根組件 Vetur插件

組件化：一個(gè)頁面可以劃分成一個(gè)個(gè)組件，每個(gè)組件有著自己獨(dú)立的結(jié)構(gòu)、樣式、行為。好處：便于維護(hù)，利于復(fù)用，提升開發(fā)效率。

普通組件的注冊(cè)使用

組件注冊(cè)的兩種方式：

1. 局部注冊(cè)：只能在注冊(cè)的組件內(nèi)使用
   1> 創(chuàng)建 .vue文件
   2> 在使用的組件內(nèi)導(dǎo)入并注冊(cè)

//比如在app.vue
//導(dǎo)入需要注冊(cè)的組件
import 組件對(duì)象 from '.vue文件路徑'
import HmHeaderr from './components/HHmHeader'export default {//局部注冊(cè)components: {'組件名': 組件對(duì)象，HmHeader: HmHeader}
}

2. 全局注冊(cè)：所有組件內(nèi)都能使用
   1> 創(chuàng)建 .vue 文件
   2> main.js中進(jìn)行全局注冊(cè)

import HmButton from './components/HmButton'
// 調(diào)用Vue.component 進(jìn)行全局注冊(cè)
// vue.component('組件名',組件對(duì)象)
Vue.component('HmButton',HmButton)

組件的三大部分組成

結(jié)構(gòu)template：只有一個(gè)根元素
樣式style：全局樣式（默認(rèn)）：影響所有組件；局部樣式：scoped下樣式，只作用于當(dāng)前組件
邏輯scrript：el跟實(shí)例獨(dú)有，組件中的data是一個(gè)函數(shù)，其他配置項(xiàng)一致

export default {data () {return {count: 999}}
}

組件通信

1.父子關(guān)系
props 和 $emit
父組件通過props將數(shù)據(jù)傳遞給子組件，子組件利用 $emit通知父組件修改更新
父組件先動(dòng)態(tài)綁定屬性值，然后子組件通過prpos：{‘屬性名’}來接受父組件的值

vuex
2.非父子關(guān)系
provide & inject
eventbus
vuex

prop

定義：組件上注冊(cè)的一些自定義屬性
作用：向組件傳遞數(shù)據(jù)
特點(diǎn)：任意數(shù)量，任何類型

props校驗(yàn)

props: {校驗(yàn)的屬性名: 類型
}
props: {校驗(yàn)的屬性名: {type: 類型,required: true,//是否必填default: 默認(rèn)值,//默認(rèn)值validator (value){//自定義校驗(yàn)邏輯return 是否通過校驗(yàn)}}
}

prop & data,單向數(shù)據(jù)流

單向數(shù)據(jù)流：子組件要修改父組件傳來的值，只能告訴父組件讓父組件改
prop：外面?zhèn)鬟M(jìn)來的值，不能隨便改
data：自己的值，隨便改

非父子通信 - event bus 事件總線

非父子通信 - provide & inject

v-model 原理

<div id = "app"><input v-model="msg" type="text"><input :value="msg" @input="msg = $event.target.value" type="text">
</div>

表單類組件封裝 & v-model 簡化代碼

步驟：

1. 父?jìng)髯?#xff1a;數(shù)據(jù)由父組件通過props傳遞過來，然后拆解v-model來綁定數(shù)據(jù)
2. 子傳父：監(jiān)聽輸入，將值再傳遞給父組件

//子組件Sun
<select :value="CityId" @change="handleChange"><option value="102"></option>
</select>
props: {cityId: String
},
methods: {handleChange(e){this.$emit('事件名',e.target.value)}
}//父組件
<faSelect :cityId="selected" @事件名="selected = $event"></faSelect>

以上代碼的簡化：

1. 子組件中：props傳值要給value，觸發(fā)事件為 input 事件
2. 父組件中：v-model給組件直接綁定數(shù)據(jù)（:value + @input）

//子組件
<select :value="value" @change=“handle”><option value="102"><.option>
</select>
props: {value: Number
}，
methods: {handle(e){this.$emit('input',e.target.value)}
}//父組件
<select v-model="selectId "/>

.sync 修飾符

作用：可以實(shí)現(xiàn)子組件與父組件數(shù)據(jù)的雙向綁定
特點(diǎn)：prop屬性名，可以自定義，非固定為value
場(chǎng)景：封裝彈框類的基礎(chǔ)組件，visible屬性true顯示fale隱藏

// 父組件
<BaseDia :visible.sync="isShow"/>
---------------------------------上下一樣
<BaseDia :visible="isShow" @update:visible="isShow = $event"/>// 子組件
props: {visible: Boolean
},
this.$emit('update:visable',false)

ref 和 $refs

作用：利用ref和$refs可以用于獲取dom元素，或者組件實(shí)例
特點(diǎn)：查找范圍 當(dāng)前組件內(nèi)

1. 獲取DOM：

第一步：找到目標(biāo)標(biāo)簽，添加 ref 屬性

<div ref="charRef">111</div>

第二步：恰當(dāng)時(shí)機(jī)，通過this.$refs.xxx獲取目標(biāo)元素

mounted () {console.log(this.$refs.charRef)
}

2. 獲取組件實(shí)例

第一步：找到目標(biāo)組件添加 ref 屬性

<BaseForm ref="baseForm"></BaseForm>

第二步：恰當(dāng)時(shí)機(jī)，通過 this.$refs.xx獲取目標(biāo)組件，就可以調(diào)用組件對(duì)象里面的方法

this.$refs.baseForm.組件方法()

vue異步更新dom & $nextTick

1. Vue是異步更新DOM的
2. 想要在DOM更新完成之后做某件事，可以使用$nextTick

//這段代碼起不到作用，第一句異步更新，第二句會(huì)再第一句前面執(zhí)行
handleEdit () {//1.顯示輸入框this.isShowEdit = true//2.讓輸入框獲取焦點(diǎn)this.$refs,inp.focus()
}
// 修改代碼
handleEdit () {//1.顯示輸入框this.isShowEdit = true//2.讓輸入框獲取焦點(diǎn)this.$nextTick(()=>{this.$refs,inp.focus()})
}

自定義指令

• 全局注冊(cè)

Vue.directive('指令名'.{//inserted 會(huì)在指令所在的元素插入到頁面中的時(shí)候出發(fā)inserted (el) {//el 就是指令所綁定的元素el.focus()}
})

• 局部注冊(cè)

directives: {"指令名": {inserted () {//可以對(duì)el標(biāo)簽，擴(kuò)展額外功能el.focus()}}
}

自定義指令 - 指令的值

需求：實(shí)現(xiàn)一個(gè)color指令 - 傳入不同的顏色，給標(biāo)簽設(shè)置文字顏色

• 語法：再綁定自定義指令時(shí)，可以通過“等號(hào)”的形式為指令綁定具體的參數(shù)值

<div v-color="color1">我是內(nèi)容</div>

• 通過binding.value 可以拿到指令值，指令值修改會(huì)觸發(fā)update函數(shù)

data () {return {color1: red}
},
directives: {color: {//提供的是元素被添加到頁面中時(shí)的邏輯inserted (el,binding) {el.style.color = binding.value},//指令的值的修改的時(shí)候觸發(fā)，提供值變化后，dom更新的邏輯update (el,binding) {el.style.color = binding.value}}
}

插槽

作用：讓組件內(nèi)部的一些結(jié)構(gòu)支持自定義
用法：
第一步：將希望自定義組件的某部分使用 slot 占位

<!--組件TodoList-->
<template><div>111</div><slot></slot><div></div>
</template>

第二步：在使用組件的地方自由定制

<TodoList><!--在這里自定義想要的內(nèi)容--><span>我在這里自定義，將在slot部位顯示</span>
</TodoList>

插槽默認(rèn)內(nèi)容的顯示

只需要在 slot 部位寫入默認(rèn)值就可以，當(dāng)使用插槽的時(shí)候自定義的內(nèi)容就會(huì)覆蓋掉默認(rèn)內(nèi)容

具名插槽

作用：組件內(nèi)有多處需要自定義

<!--MyDialog組件-->
<div><slot name="head"></slot>
</div>
<div><slot name="content"></slot>
</div>
<div><slot name="footer"></slot>
</div>

<MyDialog><template v-slot:head>自定義內(nèi)容1</template><template v-slot:content>自定義內(nèi)容2</template><template #footer>自定義內(nèi)容3</template>
</MyDialog>

作用域插槽

封裝通用組件

VueRouter(5 + 2)

1. 下載：下載VueRouter模塊到當(dāng)前工程，版本3.6.5

npm 

2. 引入

import VueRouter from 'vue-router'

3. 安裝路由對(duì)象

Vue.use(VueRouter)

4. 創(chuàng)建路由對(duì)象

const router = new VueRouter()

5. 注入，將路由對(duì)象注入到 new Vue 實(shí)例中，建立關(guān)聯(lián)

new Vue({render: h => h(App),router
}).$mount('#app')

兩個(gè)核心的步驟

1. 創(chuàng)建需要的組件（views目錄），配置路由柜子
   Find.vue My.vue Friend.vue

import Find from './views/Find.vue'
import My from './views/My.vue'
import Friend from './views/Friend.vue'const router = new VueRouter({routes: [{path: '/find',component: Find},{path: '/my',component: My},{path: '/friend',component:Friend},]
})

2.配置導(dǎo)航，配置路由出口（路徑匹配的組件顯示的位置）

<div class="footer_wrap"><a href="#/find">發(fā)現(xiàn)音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a>
</div>
<div class="top"><router-view></router-view>
</div>

組件存放目錄問題（組件分類）

• src/views 文件夾：頁面組件-頁面展示-配合路由使用
• src/components文件夾：復(fù)用組件-展示數(shù)據(jù)-常用于復(fù)用

路由封裝

• 將原來在main.js中的路由代碼剪切到 src/router/index.js 文件中方便管理
• 原來的路徑可以寫成絕對(duì)路徑 @代表 src 目錄

聲明式導(dǎo)航 - 導(dǎo)航鏈接

vue-router 提供了一個(gè)全局組件 router-link（取代a標(biāo)簽）

1. 能實(shí)現(xiàn)跳轉(zhuǎn)，配置 to 屬性來指定路徑（必須），相比于a標(biāo)簽省略 #
   

2. 自帶高亮類名，可以通過css手動(dòng)設(shè)置高亮類型

router-link-active 模糊匹配 to=“/my"可以匹配 /my /my/a /my/b …
router-link-exact-active 精確匹配 to=”/my" 只可以匹配 /my

如何自定義這兩個(gè)類名

const router = new VueRoouter({routes:[...],linkActiveClass:'類名1',linkExactiveClass:'類名2'
})

聲明式導(dǎo)航-跳轉(zhuǎn)傳參

• 查詢參數(shù)傳參（適合傳多個(gè)參數(shù)）

1. to = “/path?參數(shù)名=值”
2. 對(duì)應(yīng)頁面組件接受傳遞過來的值 $router.query.參數(shù)名

• 動(dòng)態(tài)路由傳參 (單個(gè))

1. 配置動(dòng)態(tài)路由

const router = new VueRouter({routes: [...,{path: '/search/:參數(shù)名',component: Search}]
})

2. 配置導(dǎo)航鏈接 to=“/path/參數(shù)值”
3. 對(duì)應(yīng)頁面組件接受傳遞過來的值 $route.params.參數(shù)名

可選符 ?
如果按照第一步那樣配置參數(shù)名的話在跳轉(zhuǎn)鏈接的時(shí)候就必須有參數(shù)名，如后面增加可選符的話有沒有參數(shù)就都可以 path: ‘/search/:參數(shù)名?’,

路由重定向

問題：網(wǎng)頁打開后，url是默認(rèn)路徑 / ，未匹配到組件時(shí)會(huì)出現(xiàn)空白
重定向：匹配到某一路徑的時(shí)候，強(qiáng)制跳轉(zhuǎn)到某一路徑

const router = new VueRouter({routes: [{path: '/',redirect: '/home'},{path: '/home',component: Home},]
})

路由 404

作用：當(dāng)路徑找不到匹配時(shí)，給一個(gè)提示頁面
位置：在路由地址配置項(xiàng)的最后

const router = new VueRouter({routes: [{path: '/',redirect: '/home'},{path: '/home',component: Home},{path: '*',component: NotFind} //當(dāng)前面兩個(gè)選項(xiàng)都匹配不到的時(shí)候就輪到這行了]
})

路由模式

• hash 路由（默認(rèn)）
• history路由（常用）上線需要服務(wù)端支持

const router = new VueRouter({routes: [{path: '/',redirect: '/home'},{path: '/home',component: Home},{path: '*',component: NotFind} //當(dāng)前面兩個(gè)選項(xiàng)都匹配不到的時(shí)候就輪到這行了],mode: "history"
})

編程式導(dǎo)航 - 按鈕基本跳轉(zhuǎn)

methods: {goSearch() {//通過路徑的方式跳轉(zhuǎn)// 1this.$router.push('/search')// 2this.$router.push({path: '/search'	})}
}

//通過命名路由的方式跳轉(zhuǎn)，適合名字長的
const router = new VueRouter({routes: [{path: '/',redirect: '/home'},{name: 'search' path: '/home',component: Home},{path: '*',component: NotFind} //當(dāng)前面兩個(gè)選項(xiàng)都匹配不到的時(shí)候就輪到這行了],mode: "history"
})
methods: {goSearch() {this.$router.push({name: 'search'})}
}

編程式導(dǎo)航 - 路由傳參

// 通過路徑參數(shù)傳參
data () {return {inpvalue: ''}
},
methods: {goSearch() {//通過路徑的方式跳轉(zhuǎn)// 1this.$router.push(`/search?key=${this.inpvlaue}`)// 2this.$router.push({path: '/search',query: {key: this.inpValue	}})}
}
//接受key
{{this.$route.query.key}}

// 動(dòng)態(tài)路由傳參
methods: {goSearch() {//通過路徑的方式跳轉(zhuǎn)// 1this.$router.push(`/search/${this.inpValue}`)// 2this.$router.push({path: `/search/${this.inpValue}`})}
}
//接受
$route.pramas.words

組件緩存 keep-alive

概念：是Vue的內(nèi)置組件，當(dāng)他包裹動(dòng)態(tài)組件的時(shí)候，會(huì)緩存不活動(dòng)的組件實(shí)例而不是銷毀他，同時(shí)有了新的鉤子函數(shù)，同時(shí)他是一個(gè)抽象組件，自身不會(huì)渲染DOM元素。
能解決的問題：在組件切換過程中可以避免組件的多次重復(fù)渲染，減少了加載時(shí)間，提高用戶體驗(yàn)
三個(gè)屬性：

1. include：組件名數(shù)組，只有匹配的組件會(huì)被緩存
2. exclude：組件名數(shù)組，只有匹配的組件會(huì)被緩存
3. max：最多可以緩存多少組件實(shí)例

新的兩個(gè)生命周期鉤子：

• actived：激活時(shí)，組件被看到時(shí)觸發(fā)
• deactived：失活時(shí)，離開頁面組件不看見

vuex概述

1.是什么？
vuex是一個(gè)vue的狀態(tài)（數(shù)據(jù)）管理工具。vuex是一個(gè)插件，可以幫我們管理vue通用的數(shù)據(jù)（多組件共享的數(shù)據(jù)）
2.場(chǎng)景
某個(gè)狀態(tài)在很多個(gè)組件來使用，多個(gè)組件共同維護(hù)一份數(shù)據(jù)

新建一個(gè)空倉庫

1. 安裝 vuex
2. 新建 store/index.js 專門存放 vuex
3. 注冊(cè) Vue.use(Vuex) 創(chuàng)建倉庫 const store = new Vuex.Store()
4. main.js 中導(dǎo)入掛載

//創(chuàng)建數(shù)據(jù)
const store = new Vuex.Store({state: {count: 100	}
})
// 使用方法
// 模板中： {{$store.state.xxx}}
// 邏輯組件中：this.$store.state.xxx
// JS模塊中：store.state.xxx

以上代碼可以通過輔助函數(shù) mapState() 幫助我們把store中的數(shù)據(jù)自動(dòng)映射到組件的計(jì)算屬性中

// 在需要的組件中先導(dǎo)入這個(gè)函數(shù)
import {mapState} from 'vuex'
// 計(jì)算屬性中使用
computed: {...mapState(['count'])
}
// 模板中使用： {{ count }}

核心概念 - mutations（同步）

vuex同樣遵循單向數(shù)據(jù)流，組件中不能直接修改倉庫里的數(shù)據(jù)(strict: ture可以開啟嚴(yán)格模式)

mutations可以來修改state數(shù)據(jù)。（state數(shù)據(jù)的修改只能通過它）

const store = new Vuex.Store({state: {count: 100	},mutations: {add (state) {state.count += 1}}
})
// 組件中調(diào)用mutations
this.$store.commit('add')

mutations的傳參語法

mutations: {add (state,n) {state.count += n}
}// 組件提交中調(diào)用
this.$store.commit('add',10)

mapMutations把位于mutations中的方法提取出來，映射到組件methods中

mutations: {add (state,n) {state.count += n}
}
// 組件中直接調(diào)用這個(gè)方法
import {mapMutations} from 'vuex'
methods: {...mapMutations({'add'})//相當(dāng)于組件中有了這個(gè)函數(shù)
}

核心概念 - actions

相比于mutations同步處理數(shù)據(jù)，便于監(jiān)測(cè)數(shù)據(jù)變化，記錄調(diào)試，actions能處理異步操作

// 組件中調(diào)用actions中的方法
methods: {change () {this.$store.dispatch('方法名'，載荷)	}
}
// 提供actions方法
actions: {方法名 (context, 載荷) {setTimeout(()=>{context.commit('m中的方法',載荷)})	}
}
// mutations 中接受 a'ctions
mutations: {m中方法 (state,載荷){state.count = 載荷}
}

mapActions…也是映射到組件的methosd方法中

核心概念-getters

類似于之前的計(jì)算屬性,有時(shí)候我們還需要從state中派生出一些狀態(tài)，這些狀態(tài)依賴state，此時(shí)會(huì)用到getters

getters: {filterList (state) {return state.list.filter(item => item > 5)}
}

組件中訪問getters的方法有兩種：
底層：{{ $store.getters.filterList }}
通過輔助函數(shù)：在計(jì)算屬性中注冊(cè)，在模版中直接插入表達(dá)式

輔助函數(shù)小結(jié)：
state和getters都是在組件的計(jì)算屬性中注冊(cè)
mutations和actions是在組件的方法中注冊(cè)

核心概念-模塊module

解決的問題：因項(xiàng)目太大而導(dǎo)致的state臃腫不以維護(hù)，從而將他拆解成多個(gè)模塊。

// 創(chuàng)建小的模塊 store/modules/user.js
const state = {userInfo: {name: ‘zjx’age: 18 }
}
const mutations = {}
const actions = {}
const getters = {}
export default {state,mutations,actions,getters
}
// 將小的模塊掛載到main.js中的store中
import user from ‘./modules/user’const store = new Vuex.Store({modules: {user}
})

模塊中state的訪問方法

• 直接通過模塊名訪問 $store.state.模塊名.xxx
• 通過mapState映射
  • 根級(jí)別的映射 mapState([‘模塊名’]) 模塊名.小組.小組成員
  • 子模塊的映射（需要在模塊文件中開啟命名空間 namespaced: true ) mapState(‘組件民’,[’ 小組 ']) 小組.小組成員

模塊中g(shù)etters的訪問方法

• 原生方法直接通過模塊名訪問 $store.getters[’ 模塊名 / xxx ']
• mapGetters映射與state相同

模塊中mutation的訪問方法

默認(rèn)模塊（沒有開啟命名空間）mutation 和 actions會(huì)被掛載到全局，只有開啟命名空間，才會(huì)掛載到子模塊

• 原生方法 $store.commit( ’ 模塊名/mutation中方法 ', 額外參數(shù) )
• mapMutations映射
  • mapMutations([’ xxx '])
  • mapMutations(‘模塊名’，[‘xxx’]),需要開啟命名空間

模塊中action的訪問方法（與mutation類似）

基于json-server工具，模擬后端接口服務(wù)環(huán)境

1. 安裝全局工具（僅一次）json-server
2. 代碼根目錄新建一個(gè) db 目錄
3. 將資料 index.json 移入db目錄
4. 進(jìn)入 db目錄，執(zhí)行命令，啟動(dòng)后端接口服務(wù)
5. 訪問接口測(cè)試 http://localhost:3000/