狀態(tài)管理
- 在開發(fā)中，我們會(huì)用應(yīng)用程序處理很多的數(shù)據(jù)苦囱，這些數(shù)據(jù)需要保存在我們應(yīng)用程序徐的某一個(gè)位置簸喂，對于這些數(shù)據(jù)的管理我們就稱之為狀態(tài)管理
image.png
使用方法
- 下載vuex最新版
npm install vuex@next -
新建文件夾及文件
image.png
* index.js導(dǎo)入createStore ，并創(chuàng)建state共享數(shù)據(jù)
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
counter: 100
}
}
})
export default store;
- 在main.js文件中添加依賴并使用
import store from './store'
createApp(App).use(store).mount('#app') - 在組件中使用
<h2>{{$store.state.counter}}</h2> - 組件方法中獲取數(shù)據(jù)(不建議修改)
this.$store.state.counter -
組件方法通過commit修改數(shù)據(jù)（建議）
單一狀態(tài)樹
- 定義：用一個(gè)對象就包含全部的應(yīng)用層級的狀態(tài)
- 單一狀態(tài)樹的優(yōu)勢：能夠使用最直接的方式找到每個(gè)狀態(tài)片段，方便維護(hù)弓乙、調(diào)試和管理
mapState方法
-
導(dǎo)入
-
使用option api
setup()做法
封裝成一個(gè)函數(shù)
es6之?dāng)U展運(yùn)算符 三個(gè)點(diǎn)（…）
- 對象中的擴(kuò)展運(yùn)算符(...)用于取出參數(shù)對象中的所有可遍歷屬性，拷貝到當(dāng)前對象之中
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
相當(dāng)于
let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }
getter的基本使用
- 類似于computed
option api
- 當(dāng)多個(gè)計(jì)算屬性時(shí)钧惧，我們可以使用
mapGetters(需要要導(dǎo)入)
image.png
mutations
-
提交數(shù)據(jù)
-
mapMutations
image.png -
提交到根里面image.png
actions的基本使用（派發(fā)）
-
可以進(jìn)行異步操作
context
image.png
-
派發(fā)到根actions里面
-
派發(fā)風(fēng)格------對象類型
-
輔助函數(shù) mapActions
image.png -
setup函數(shù)中使用
-
結(jié)合axios和promise做異步請求
modules(模塊)
- 使每個(gè)模塊都擁有自己的state暇韧、mutation、action浓瞪、getter,甚至嵌套子模塊
-
基本使用
導(dǎo)出
userModule
導(dǎo)入
-
拿一個(gè)模塊里面的getters里面的數(shù)據(jù)
其他模塊的getters里面的數(shù)據(jù)在根getters會(huì)做一個(gè)合并懈玻，
actions和mutations里面的數(shù)據(jù)同樣會(huì)做合并
image.png
但是這種方法很難讓人知道數(shù)據(jù)到低是從那個(gè)文件傳過來的
so：我們在定義模塊的時(shí)候，在其對象里面設(shè)置屬性
使用
- 在組件里使用模塊輔助函數(shù)
寫法一
寫法二：
import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from "vuex"; const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers("home")
computed（）{
...mapState(["homeCounter"]),
...mapGetters(["doubleHomeCounter"])
}
關(guān)于映射返回函數(shù)的處理方式（就算有子模塊也適用）
- 使用方法
（"模塊名字"乾颁，["方法名"]）
const getters = useGetters("home", ["doubleHomeCounter"]) - 出口函數(shù)index.js
import { useGetters } from './useGetters';
import { useState } from './useState';
export {
useGetters,
useState
}
- useState.js
import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useState(moduleName, mapper) {
let mapperFn = mapState
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapState
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
- useGetters.js
import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'
export function useGetters(moduleName, mapper) {
let mapperFn = mapGetters
if (typeof moduleName === 'string' && moduleName.length > 0) {
mapperFn = createNamespacedHelpers(moduleName).mapGetters
} else {
mapper = moduleName
}
return useMapper(mapper, mapperFn)
}
- useMapper.js
import { computed } from 'vue'
import { useStore } from 'vuex'
export function useMapper(mapper, mapFn) {
// 拿到store獨(dú)享
const store = useStore()
// 獲取到對應(yīng)的對象的functions: {name: function, age: function}
const storeStateFns = mapFn(mapper)
// 對數(shù)據(jù)進(jìn)行轉(zhuǎn)換
const storeState = {}
Object.keys(storeStateFns).forEach(fnKey => {
const fn = storeStateFns[fnKey].bind({$store: store})
storeState[fnKey] = computed(fn)
})
return storeState
}
