vue3如何使用provide实现状态管理详解
前言
在 Vue 生态中, Vuex 这个官方的状态管理库在 Vue 应用开发中,为我们带来了非常便捷的功能。但是 Vuex 20K+ 的大小,也带来了一些成本,对于项目规模较小的应用来说, 引入 Vuex 只是为了存储用户信息之类的一小撮数据,有点不值得。
Vue2.2.x 在后期就提供了 provide/inject API 来帮我们实现跨层级组件之间的通信。
Vue3.x 把 provide 也放到了应用 API 上,这就更方便让我们在此基础上,实现一个基础的状态管理。
如何通过 provide/inject 实现 Vuex的功能
首先我们想一下大概的逻辑,把它做成一个插件,通过 use 方法注册到应用实例中。
在 install 方法中,通过 app.provide 方法,把数据挂载到根组件上,该数据应该是一个响应式数据,并且为了数据安全,应该对数据的变更进行限制,遵循单向数据流的设计,不能让用户直接的进行修改,所以在暴露数据时,应该对数据进行 readonly(只读) 处理。
实现类似 Vuex 的 useStore 功能,让用户通过此方法访问数据。
实现类似 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'
创建 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[]) { 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) }
实现 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)">修改数据</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>
总结
至此已经实现了基础的 Vuex 功能,可以自己动手实践一下,进行优化,有问题欢迎大家提出
到此这篇关于vue3如何使用provide实现状态管理的文章就介绍到这了,更多相关vue3 provide实现状态管理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 在看element-ui的源码的时候,注意到源码里面有很多地方使用provide和inject的属性,本文主要介绍了vue2实现provide inject传递响应式,分享给大家,感兴趣的可以了解一下...2021-05-22
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个,本文重点给大家介绍vue3中provide和inject的使用,需要的朋友参考下吧...2021-07-02
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数,所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化...2021-10-10
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17