vue3如何使⽤provide实现状态管理详解
⽬录
前⾔
如何通过 provide/inject 实现 Vuex的功能
老艾堂在应⽤中注册此插件
插件的⼊⼝⽂件
创建 store ，把对应的数据挂载到根组件上
实现 mapState、mapMutations 和 mapActions⽅法
组件中使⽤
总结
前⾔
在 Vue ⽣态中， Vuex 这个官⽅的状态管理库在 Vue 应⽤开发中，为我们带来了⾮常便捷的功能。但是 Vuex 20K+ 的⼤⼩，也带来了⼀些成本，对于项⽬规模较⼩的应⽤来说，引⼊ Vuex 只是为了存储⽤户信息之类的⼀⼩撮数据，有点不值得。桥教学反思
Vue2.2.x 在后期就提供了 provide/inject API 来帮我们实现跨层级组件之间的通信。
Vue3.x 把 provide 也放到了应⽤ API 上，这就更⽅便让我们在此基础上，实现⼀个基础的状态管理。
如何通过 provide/inject 实现 Vuex的功能
⾸先我们想⼀下⼤概的逻辑，把它做成⼀个插件，通过 u ⽅法注册到应⽤实例中。
在 install ⽅法中，通过 app.provide ⽅法，把数据挂载到根组件上，该数据应该是⼀个响应式数据，并且为了数据安全，应该对数据的变更进⾏限制，遵循单向数据流的设计，不能让⽤户直接的进⾏修改，所以在暴露数据时，应该对数据进⾏readonly（只读）处理。
实现类似 Vuex 的 uStore 功能，让⽤户通过此⽅法访问数据。
实现类似 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.u(router).u(store).mount('#app')
抄手的做法插件的⼊⼝⽂件
在⼊⼝⽂件中，直接导出所有⽅法。
// sky-vuex/index.ts
export * from './main/index'
创建 store ，把对应的数据挂载到根组件上
store 本⾝是⼀个对象，包含 state 属性和 commit、dispatch 等⽅法。 store 最主要的⼀些功能就是让所有组件，都能拿到store 对象，来获取 state 中的数据，以及调⽤相关⽅法来修改 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 = {}) => { // 创建 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[]) {12月英语
求放过mergeOptions.actions[eventName](store, ...args)
},
commit(eventName: string, ...args: any[]) {
...
},
}
return {
install(app: any) {
app.provide(mainStoreSky, store)
},
}
降妖捉怪
}
export const uStore = (): any => { // 其他组件通过此⽅法，获取 store 对象
return inject(mainStoreSky)
}
实现 mapState、mapMutations 和 mapActions⽅法export const mapState = () => {
const store = uStore()
return store.state
}
export const mapActions = (eventName: string) => {
const store = uStore()
return (...args: any[]) => store.dispatch(eventName, ...args)
}
export const mapMutations = (eventName: string) => {
const store = uStore()
return (...args: any[]) => it(eventName, ...args)
}
组件中使⽤
// store/index.ts
import { createStore } from '../sky-vuex/index'
export default createStore({
state: {
age: 18
},
mutations: {
tAge(state: any, data: number) {
state.age = data
}
},
})
// Home.vue
<template>
<div class="home">
<button @click="handleAge(23)">修改数据</button>
<h1>{{ state.age }}</h1>
</div>
</template>杭州小吃街
<script lang="ts">
import { defineComponent } from 'vue'
import { uStore, mapActions, mapMutations } from '@/sky-vuex/index'
export default defineComponent({
name: 'Home',
tup() {
const store = uStore()
const handleAge = mapMutations('tAge')
/
/ const handleAge = mapActions('tAge')
// const handleAge = () => {
// store.dispatch('tAge', 5)
// }
return {
state: store.state,
handleAge,
}
},
})
</script>
总结
⾄此已经实现了基础的 Vuex 功能，可以⾃⼰动⼿实践⼀下，进⾏优化，有问题欢迎⼤家提出
到此这篇关于vue3如何使⽤provide实现状态管理的⽂章就介绍到这了，更多相关vue3 provide实现状态管理内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
