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>
3条答案
按热度按时间disho6za1#
这也是一个有帮助的参考任何人试图弄清楚这一点:
https://forum.vuejs.org/t/how-to-create-an-npm-package-of-a-vue-js-project-which-uses-vuex/14706/2
这里需要注意的一个关键问题是以下各项的用法:
它在API中隐藏了一点,但这允许您在用户通过他们的商店时注册Vuex模块。
https://vuex.vuejs.org/en/modules.html#dynamic-module-registration
c8ib6hqw2#
你应该可以要求用户把你的vuex模块(作为你的包的一部分API)添加到你的模块中,也许这也可以作为安装功能的一部分来完成(如果你使用插件的话)。
8cdiaqws3#
我为此做了一个辅助函数
这是我的Vue组件
如您所见,我们使用
import * as TheStoreIWant
,因此存储结构为