Vue собственная библиотека vuex - PullRequest
Новая
       52

Vue собственная библиотека vuex

2 голосов
/ 06 мая 2020

Я сделал приложение 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, а не магазин библиотеки. Это нехорошо для меня, потому что мне нужно было бы иметь одинаковые действия / мутации / состояние для каждого приложения, в котором мне нужна библиотека. библиотека будет использовать собственное хранилище, а не хранилище, в котором это требуется?

1 Ответ

1 голос
/ 06 мая 2020

Я думаю, что для вашего совместно используемого (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), вы, вероятно, потеряете возможность использовать вкладку Vuex в браузере Vue инструмент разработчика.

Это также предотвращает использование таких функций, как mapAction и mapGetter, поэтому мы добавляем их вручную во время beforeCreate.

В качестве альтернативы вы могли бы рассмотреть удаление vuex из компонента и использование vue .Observable, который является всего лишь способом обмена наблюдаемыми переменными между компонентами. Если вам не нужны некоторые функции vuex в общем компоненте, это может иметь смысл.

...