Vue库自己的vuex

Question

我制作了 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 功能，这可能是值得的。