#typescript #vue.js #vuex #vuex-modules #vuex-module-decorators
Вопрос:
Я новичок в Vue и пытаюсь использовать его в качестве интерфейса для созданного мной API. Я следовал нескольким руководствам и читал множество примеров из разных источников, и, похоже, ничего из того, что я пробовал, не работает, поэтому я не уверен, где я ошибаюсь.
По сути, происходит то, что при загрузке страницы я получаю сообщение об ошибке в консоли моего браузера:
Uncaught Error: Store not provided in decorator options when using dynamic option Трассировка стека говорит мне, что это происходит из моего Tags модуля. Что не имеет смысла, так это то, что я предоставил объект магазина. Если я попытаюсь удалить модуль dynamic: true из модуля, я получу новую ошибку:
Uncaught Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module should be decorated with store in decorator, i.e. @Module({store: store}) or store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store) Если я не использую getModule и просто экспортирую класс, я получу другую ошибку:
Uncaught (in promise) Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action? That works only in dynamic modules. If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"] Эта ошибка говорит мне, что мне нужен динамический модуль, и при повторной настройке dynamic: true я возвращаюсь к первой ошибке.
Весь соответствующий код можно найти ниже. Кто-нибудь может мне в этом помочь? Я совершенно потерялся.
// @/main.ts import { createApp } from 'vue' import { sync } from 'vuex-router-sync' import App from './App.vue' import router from './router' import store from './store' import './assets/app.css' sync(store, router) createApp(App).use(store).use(router).mount('#app') // @/store/index.ts import { createStore } from 'vuex' import createPersistedState from 'vuex-persistedstate' import tags from '@/store/tags' export default createStore({ state: { baseUrl: '/api/v1', }, mutations: {}, actions: {}, modules: { tags, }, plugins: [ createPersistedState(), ], }) // @/store/tags.ts import { Action, getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators' import HTTP from '@/http' import store from '@/store' interface Tag { foo: string bar: string } @Module({ namespaced: true, name: 'tags', store, dynamic: true, }) class TagsModule extends VuexModule { tags: Tag[] = [] @Action({ commit: 'setTags' }) async fetchTags(): Promiselt;Tag[]gt; { return HTTP().get('/tags') } @Mutation setTags(tags: Tag[]): void { this.tags = tags } } export default getModule(TagsModule)
Комментарии:
1. Первое, что вам нужно проверить в сторонних библиотеках,-это для какой версии они предназначены. Это для Vue2, в то время как вы, очевидно, используете Vue 3
2. @EstusFlask Ну, это неловко, если это так. Я видел, как кто-то рекомендовал его другому человеку, пока я искал решения другой проблемы. Нигде не указано, что это специально для Vue2 или не для Vue3. Я полагаю, вы не можете порекомендовать другую библиотеку? Модули Vuex с объявлениями типов Typescript-это абсолютный беспорядок.
3. Если в нем не указана версия Vue, это означает, что он был написан, когда Vue 3 не был опцией. Это может быть подтверждено версией vue в пакете lib.json и проблемами «Vue 3???» в репо. Я не знаю об альтернативах, и на самом деле у самих декораторов TS проблемы с типом. Вы можете проверить Pinia, у него есть api, дружественный к TS, который близок к тому, что ожидается от Vuex 5.
4. @EstusFlask Быстро дал Пинию попробовать, прежде чем мне пришлось прекратить работать над этим, и, похоже, это сработало! Спасибо за это.