如何通过provide实现Vuex的功能
Admin 2022-06-27 群英技术资讯 850 次浏览
Vue2.2.x 在后期就提供了 provide/inject API 来帮我们实现跨层级组件之间的通信。
Vue3.x 把 provide 也放到了应用 API 上,这就更方便让我们在此基础上,实现一个基础的状态管理。
首先我们想一下大概的逻辑,把它做成一个插件,通过 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 本身是一个对象,包含 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) }
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 功能,可以自己动手实践一下,进行优化,有问题欢迎大家提出
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
JavaScript属性操作,下文有实例供大家参考,对大家了解操作过程或相关知识有一定的帮助,而且实用性强,希望这篇文章能帮助大家,下面我们一起来了解看看吧。
这篇文章主要介绍了Vue 3自定义指令开发的相关总结,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
区别:1.JS运行在浏览器端,用于用户的交互效果,NodeJS运行在服务器端,用于服务器的操作,例如,Web服务器创建,数据库的操作,文件的操作等2.JS运行在浏览器端,存在多个JS解释器,存在兼容性的问题,而NodeJS只有V8引擎一种解释器,不存在兼容性问题3.两者都有内置对象,自定义对象,有不同的宿主对象 词语解释(js为例):js的内置对象、自定义对象,和宿主对象javasc
本篇文章带大家了解一下nodejs中的path.join和path.resolve,介绍一下path.join和path.resolve的区别,希望对大家有所帮助!
本篇文章整理总结了一些基于jQuery的前端面试来分享给大家,里面jQuery的常见面试问题,以及移动端常见问题,希望对大家有所帮助!
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008