vue3如何使用provide實現(xiàn)狀態(tài)管理詳解
前言
在 Vue 生態(tài)中， Vuex 這個官方的狀態(tài)管理庫在 Vue 應用開發(fā)中，為我們帶來了非常便捷的功能。但是 Vuex 20K+ 的大小，也帶來了一些成本，對于項目規(guī)模較小的應用來說， 引入 Vuex 只是為了存儲用戶信息之類的一小撮數(shù)據(jù)，有點不值得。
Vue2.2.x 在后期就提供了 provide/inject API 來幫我們實現(xiàn)跨層級組件之間的通信。
Vue3.x 把 provide 也放到了應用 API 上，這就更方便讓我們在此基礎上，實現(xiàn)一個基礎的狀態(tài)管理。
如何通過 provide/inject 實現(xiàn) Vuex的功能
首先我們想一下大概的邏輯，把它做成一個插件，通過 use 方法注冊到應用實例中。
在 install 方法中，通過 app.provide 方法，把數(shù)據(jù)掛載到根組件上，該數(shù)據(jù)應該是一個響應式數(shù)據(jù)，并且為了數(shù)據(jù)安全，應該對數(shù)據(jù)的變更進行限制，遵循單向數(shù)據(jù)流的設計，不能讓用戶直接的進行修改，所以在暴露數(shù)據(jù)時，應該對數(shù)據(jù)進行 readonly（只讀） 處理。
實現(xiàn)類似 Vuex 的 useStore 功能，讓用戶通過此方法訪問數(shù)據(jù)。
實現(xiàn)類似 Vuex 的 mapState、mapMutations 和 mapActions方法，簡化操作。
用法直接跟 Vuex 一樣。
在應用中注冊此插件
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
const app = createApp(App)
app.use(router).use(store).mount('#app')
插件的入口文件
在入口文件中，直接導出所有方法。
// sky-vuex/index.ts export * from './main/index'
創(chuàng)建 store ，把對應的數(shù)據(jù)掛載到根組件上
store 本身是一個對象，包含 state 屬性和 commit、dispatch 等方法。 store 最主要的一些功能就是讓所有組件，都能拿到 store 對象，來獲取 state 中的數(shù)據(jù)，以及調(diào)用相關方法來修改 state。
// sky-vuex/main/index.ts
import {inject, reactive, readonly} from 'vue'
const mainStoreSky = Symbol('main store key')
interface storeOptions {
state?: any
actions?: any
mutations?: any
}
export const createStore = (options: storeOptions = {}) => { // 創(chuàng)建 store 對象
const initOptions = {
state: {},
actions: {},
mutations: {},
}
const mergeOptions: storeOptions = Object.assign(initOptions, options)
const state = reactive(mergeOptions.state)
const store = {
state: readonly(state),
dispatch(eventName: string, ...args: any[]) {
mergeOptions.actions[eventName](store, ...args)
},
commit(eventName: string, ...args: any[]) {
...
},
}
return {
install(app: any) {
app.provide(mainStoreSky, store)
},
}
}
export const useStore = (): any => { // 其他組件通過此方法，獲取 store 對象
return inject(mainStoreSky)
}
實現(xiàn) mapState、mapMutations 和 mapActions方法
export const mapState = () => {
const store = useStore()
return store.state
}
export const mapActions = (eventName: string) => {
const store = useStore()
return (...args: any[]) => store.dispatch(eventName, ...args)
}
export const mapMutations = (eventName: string) => {
const store = useStore()
return (...args: any[]) => store.commit(eventName, ...args)
}
組件中使用
// store/index.ts
import { createStore } from '../sky-vuex/index'
export default createStore({
state: {
age: 18
},
mutations: {
setAge(state: any, data: number) {
state.age = data
}
},
})
// Home.vue
<template>
<div class="home">
<button @click="handleAge(23)">修改數(shù)據(jù)</button>
<h1>{{ state.age }}</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { useStore, mapActions, mapMutations } from '@/sky-vuex/index'
export default defineComponent({
name: 'Home',
setup() {
const store = useStore()
const handleAge = mapMutations('setAge')
// const handleAge = mapActions('setAge')
// const handleAge = () => {
// store.dispatch('setAge', 5)
// }
return {
state: store.state,
handleAge,
}
},
})
</script>
總結
至此已經(jīng)實現(xiàn)了基礎的 Vuex 功能，可以自己動手實踐一下，進行優(yōu)化，有問題歡迎大家提出
到此這篇關于vue3如何使用provide實現(xiàn)狀態(tài)管理的文章就介紹到這了,更多相關vue3 provide實現(xiàn)狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于vue3中ref獲取子組件值的相關資料,在Vue3中父組件獲取子組件的值可以通過使用'ref'和'$refs'來實現(xiàn),文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-08-08
el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(完整代碼和接口可直接用)
某些情況下,下拉框需要做觸底加載,發(fā)請求,獲取option的數(shù)據(jù),下面給大家分享el-select自定義指令實現(xiàn)觸底加載分頁請求options數(shù)據(jù)(附上完整代碼和接口可直接用),感興趣的朋友參考下吧2024-02-02
vue使用cesium創(chuàng)建數(shù)據(jù)白模方式
這篇文章主要介紹了vue使用cesium創(chuàng)建數(shù)據(jù)白模方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式
這篇文章主要介紹了vue動態(tài)生成新表單并且添加驗證校驗規(guī)則方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家詳細介紹了Vue AST源碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
el-table點擊某一行高亮并顯示小圓點的實現(xiàn)代碼
這篇文章主要介紹了el-table點擊某一行高亮并顯示小圓點，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue2.0生命周期，思考與理解“el被新創(chuàng)建的vm.$el替換”這句話，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關于Vue3如何封裝組件的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-02-02
Vue filter 過濾當前時間 實現(xiàn)實時更新效果
這篇文章主要介紹了Vue filter 過濾當前時間 實現(xiàn)實時更新效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
vue使用vue-video-player插件播放視頻的步驟講解
在最近的項目中有一個視頻播放的功能,在之前的項目中沒有接觸過類似的功能,第一次接觸,把具體操作步驟一下,這篇文章主要給大家介紹了關于vue使用vue-video-player插件播放視頻的相關資料,需要的朋友可以參考下2022-12-12