vue学习（7）vuex的辅助函数封装(基于vue3)

最新推荐文章于 2024-07-11 23:14:56 发布

原创

最新推荐文章于 2024-07-11 23:14:56 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #前端

文章介绍了如何在Vue应用中使用Vuex的createNamespacedHelpers方法来实现模块化的状态管理。通过创建命名空间辅助函数，可以更灵活地访问和操作特定模块的state、getters、actions和mutations。示例代码展示了从store的配置到hooks的封装，以及在组件中如何使用这些钩子函数来获取和操作状态。

简介：

封装了 mapState，mapGetters，mapActions，mapMutations，用更灵活的方式来使用vuex，主要使用的是vuex的createNamespacedHelpers方法，此方法是帮助重写以特定模块为主的辅助函数

createNamespacedHelpers 在vuex@^3.1.1 及以上都有

文件截图：

源码：

以下举个例子，模块名为index，模块里有自己的state等相关

1、store/index.ts

import { InjectionKey, App } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
import { StateTypes } from './types'
import index from './modules/index'

// InjectionKey 将store安装到Vue应用程序时提供类型,将类型传递InjectionKey给useStore方法
// 定义注入类型
const key: InjectionKey<Store<StateTypes>> = Symbol()

const store = createStore<StateTypes>({
  modules: {
    index
  }
})

export function useStore() {
  return bas