Question

Vue 库自带 vuex

2020-05-06

1320

vue.js vuejs2 vuex vue-cli

我制作了 Vue 应用程序，并使用 vue-cli-service 作为库进行构建。

"bundle": "vue-cli-service build --target lib --name search_widget \"src/components/index.js\""

它正在构建 umd.js 文件，然后我可以将其发布到 npm 并在我的其他 Vue 应用程序中使用。

在库中我有以下组件：

<template>
  <div>hello {{ $store.state }}</div>
</template>

<script>
export default {
  name: "HelloWorld"
};
</script>

我的问题是，当我将此库需要到其他 vue（nuxt）应用程序时，我可以看到这个 nuxt 应用商店而不是库商店。这对我来说并不好，因为我需要在每个需要库的应用程序中具有相同的操作/突变/状态。

在构建时是否有一些选项可以使库商店“打包”库，以便库将使用自己的商店，而不是需要它的商店？

Answer 1

我认为对于可共享 (umd) 组件，您可能需要使用非全局存储实例。

缺点是您必须更新各个组件才能挂载存储

类似这样：

import store from "./store"

export default {
    name: "form",
    // ...stuff...
    beforeCreate() {
        this.$store = store(); // No way around this
        // register getter
        this.myGetter = this.$store.getters['myGetter']
        // register action
        this.myAction = this.$store.getters['myAction']
    },
}

因为您不再使用 Vue.use(Vuex) ，所以您可能会失去在浏览器 Vue 开发工具中使用 Vuex 选项卡的能力。

这还会阻止使用 mapAction 和 mapGetter 等函数，这就是我们在 beforeCreate 期间手动添加这些函数的原因。

或者，您可能想要考虑从组件中删除 vuex，并使用 vue.Observable，这只是一种在组件之间共享可观察变量的方法。如果您不需要共享组件中的某些 vuex 功能，那么这可能是值得的。