VueX狀態(tài)管理
-
State:
vuex中的數(shù)據(jù)源钢拧，我們需要保存的數(shù)據(jù)就保存在這里，可以在頁面通過 this.$store.state來獲取我們定義的數(shù)據(jù)；
創(chuàng)建vuex實例
const store = new vuex.store({
state: {
count:1
}
})
在組件直接使用
舉栗:
<h2>{{this.$store.state.count}}</h2>
`然后在頁面上就可以看到 1`
- Getters:
Getter相當(dāng)于vue中的computed計算屬性，getter 的返回值會根據(jù)它的依賴被緩存起來淘讥，且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計算，這里我們可以通過定義vuex的Getter來獲取堤如，Getters 可以用于監(jiān)聽蒲列、state中的值的變化，返回計算后的結(jié)果煤惩，這里我們修改Hello World.vue文件如下：
state：存儲狀態(tài)（變量）
getters：對數(shù)據(jù)獲取之前的再次編譯嫉嘀，可以理解為state的計算屬性。我們在組件中使用 $sotre.getters.fun()
mutations：修改狀態(tài)魄揉，并且是同步的剪侮。在組件中使用$store.commit('',params)。這個和我們組件中的自定義事件類似洛退。
actions：異步操作瓣俯。在組件中使用是$store.dispath('')
modules：store的子模塊，為了開發(fā)大型項目兵怯，方便狀態(tài)管理而使用的彩匕。這里我們就不解釋了，用起來和上面的一樣媒区。
vuex組件通信(是基于vue開發(fā)的)
總結(jié)
同步修改和異步修改
同步修改可以直接通過 mutation -state-components-調(diào)試工具
異步修改通過-action-state-components--調(diào)試工具
計算屬性 computed
調(diào)用屬性：返回一個函數(shù)
不能當(dāng)函數(shù)使用的：計算屬性
計算屬性基于它們的響應(yīng)式依賴進(jìn)行緩存
~
~
~
非組件中獲取通過this.$store.數(shù)據(jù)名
~
~
vuex使用方式：
方式1
- 將
共享的數(shù)據(jù)放到容器store中 - 不需要共享還是放到組件內(nèi)部
方式2： - 將所有的
數(shù)據(jù)狀態(tài)都放到容器store中 - 容器中的數(shù)據(jù)非常方便調(diào)試驼仪，但是也會帶來開發(fā)繁瑣
不要濫用vuex、推薦方式1袜漩，能父子的就父子绪爸，非父子的使用vuex
大量的非父子通信使用vuex
計算屬性方法 單個計算屬性
1、 創(chuàng)建容器實例store
2 宙攻、容器的狀態(tài)state里寫數(shù)據(jù)(驅(qū)動視圖更新的數(shù)據(jù))
3奠货、 computed如同 methods，用來修改 state數(shù)據(jù)狀態(tài)的
計算屬性 簡寫方式
1座掘、mapState 輔助函數(shù)
修改容器中的數(shù)據(jù)
正確做法：通過mutation修改數(shù)據(jù)狀態(tài)
注意-注意-注意：mutation 中不能只能修改 state里的數(shù)據(jù)
執(zhí)行異步
如果需要執(zhí)行異步操作修改 state狀態(tài)递惋，則：使用 action
1、 在 action 中做兩件事兒：1 執(zhí)行異步 2 提交mutation修改容器狀態(tài)
2溢陪、 注意：不要在 action 中直接修改容器狀態(tài)萍虽，無法被調(diào)試工具觀測記錄到
3、 因為調(diào)試工具只能記錄 mutation 的歷史改變
1形真、使用mutations如同 methods杉编，用來修改 state數(shù)據(jù)狀態(tài)的
通過事件點(diǎn)擊改變store里的數(shù)據(jù) @click="store.state.count }}
2、getters:{} 相當(dāng)于computed vue里的計算屬性 ===監(jiān)聽器
直接實現(xiàn)結(jié)果<p>{{ $store.getters.getterschangecout}}</p>
小知識
1、filter過濾王财，過濾這個計算屬性的數(shù)據(jù)
步驟：
1、安裝裕便、搭建腳手架
2绒净、git建立關(guān)系
線上創(chuàng)建一個倉庫(空的)
git status 查看狀態(tài)
git remote add origin 復(fù)制地址
git push -u origin li
1、刪除app
- App.vue 偿衰、定義出口#app挂疆、寫路由出口、樣式設(shè)置局部樣式 完成
2下翎、新建router文件缤言、復(fù)制 完成
3、新建store文件视事、復(fù)制 完成
4胆萧、views兩個vue組件刪除 完成
5、新建文件俐东、跌穗、、dir 虏辫、fileter蚌吸、樣式、utils砌庄、創(chuàng)建\ 看 文檔結(jié)果
6羹唠、重啟服務(wù)看下有沒有報錯(頁面)、提交git--調(diào)整目錄結(jié)構(gòu)
6娄昆、vant(杭州有贊開發(fā)的)--導(dǎo)入vant
- 安裝: npm i vant---重啟服務(wù)器
方式一：推薦的按需引入(可以看下官方文檔) - npm i babel-plugin-import -D
配置：---創(chuàng)建文件：babel.config.js====復(fù)制
使用引入全局： import {button,.. ,.. ,..} from 'vant' //這里引入的button組件
引入樣式佩微。。稿黄。喊衫。。
Vue.ser（）
直接在
