如何发布带有Vuex模块的Vue.js NPM包?

zphenhs4  于 2023-02-05  发布在  Vue.js
关注(0)|答案(3)|浏览(204)

我正在开发一些希望放置在NPM包中的Vue组件,我面临的问题是我不知道如何发布依赖于Vuex模块的组件。
我已经将这个组件库所需的所有代码整齐地放置到一个单独的Vuex模块中,但是当有人导入我的包时,我如何注册我的模块呢?
一个好的开始是创建一个插件,我想,但我仍然需要检查一个Vuex示例,并以某种方式注册我的模块。
我看过很多关于如何发布Vue组件的教程,但没有更复杂的。
有什么建议吗?

disho6za

disho6za1#

这也是一个有帮助的参考任何人试图弄清楚这一点:
https://forum.vuejs.org/t/how-to-create-an-npm-package-of-a-vue-js-project-which-uses-vuex/14706/2
这里需要注意的一个关键问题是以下各项的用法:

store.registerModule('desiredModuleName', yourModule)

它在API中隐藏了一点,但这允许您在用户通过他们的商店时注册Vuex模块。
https://vuex.vuejs.org/en/modules.html#dynamic-module-registration

c8ib6hqw

c8ib6hqw2#

你应该可以要求用户把你的vuex模块(作为你的包的一部分API)添加到你的模块中,也许这也可以作为安装功能的一部分来完成(如果你使用插件的话)。

8cdiaqws

8cdiaqws3#

我为此做了一个辅助函数

import Vue from 'vue'
import Vuex from 'vuex'

/**
 * A package can have its own store.
 *
 * - If there is no store at all, then create the store on the root first
 * - Then add this store if it has not yet been added
 */
export const registerOrCreateStore = (vueInstance, newStoreKey, newStore) => {
  let root = vueInstance.$root
  // If we don't have a store yet, then create it
  if (!root.$store) {
    Vue.use(Vuex)
    root.$store = new Vuex.Store({})
  }

  // If we don't have the module yet, then register it
  if (!root.$store.hasModule(newStoreKey)) {
    root.$store.registerModule(newStoreKey, newStore)
  }
}

这是我的Vue组件

<script>
import * as TheStoreIWant from './store/modules/TheStoreIWant'
import { registerOrCreateStore } from '~/libs/js/helpers/vueHelper'

export default {
  name: 'MyComponentsName',
  beforeCreate() {
    registerOrCreateStore(this, 'OneUniqueStoreName', TheStoreIWant)
  },
}
</script>

如您所见,我们使用import * as TheStoreIWant,因此存储结构为

export const namespaced = true

export const state = {}

export const mutations = {}

...

相关问题