-
Notifications
You must be signed in to change notification settings - Fork 2
-
Notifications
You must be signed in to change notification settings - Fork 2
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nuxt support #2
Comments
Here's my module definition: import 'reflect-metadata'
import { Action, Mutation, State, Getter } from 'vuex-simple'
import { Container, Service } from 'vue-typedi'
import { CommentType, CommentPayloadType } from '~/logic/comments/types'
import { RawCommentType } from '~/logic/comments/models'
import CommentService from '~/logic/comments/services/api'
@Service()
class TestService {
public vas (): number {
return 1
}
}
export default class CommentsModule {
// State
@State()
public comments: CommentType[] = []
// Getters
@Getter()
public get hasComments (): boolean {
return Boolean(this.comments && this.comments.length > 0)
}
// Mutations
@Mutation()
public setComments (payload: RawCommentType[]): void {
const updatedComments: CommentType[] = []
for (const comment of payload.slice(0, 10)) {
// We transform RawCommentType in CommentType here:
updatedComments.push({ ...comment, 'rating': 0 })
}
this.comments = updatedComments
}
@Mutation()
public updateRating ({ commentId, delta }: CommentPayloadType): void {
if (!this.comments) return
const commentIndex = this.comments.findIndex((comment): boolean => {
return comment.id === commentId
})
if (!this.comments || !this.comments[commentIndex]) return
this.comments[commentIndex].rating += delta
}
// Actions
@Action()
public async fetchComments (): Promise<RawCommentType[]> {
console.log(Container.get(TestService), Container.get(TestService).vas())
const service = Container.get(CommentService)
const commentsList = await service.fetchComments()
this.setComments(commentsList)
return commentsList
}
} My typed store: import { Module } from 'vuex-simple'
// TODO: document
import CommentsModule from '~/logic/comments/module'
export default class TypedStore {
@Module()
public comments = new CommentsModule()
} And store from // We use default Nuxt Module-based store,
// read more about it here:
// https://nuxtjs.org/guide/vuex-store
// TODO: document
import Vue from 'vue'
import Vuex from 'vuex'
import { createVuexStore } from 'vuex-simple'
import { Container } from 'vue-typedi'
import TypedStore from '~/logic/store'
import tokens from '~/logic/tokens'
Vue.use(Vuex)
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export default function store () {
const typedStore = new TypedStore()
// Registering DI container items:
Container.set(tokens.STORE, typedStore)
Container.set(tokens.COMMENTS, typedStore.comments)
return createVuexStore(typedStore, {
'strict': false,
'modules': {},
'plugins': [],
})
} |
Here's the fix for this case: typestack/typedi#99 |
The next problem is that For some reason |
Code: import CommentService from '~/logic/comments/services/api'
@Injectable()
export default class CommentsModule {
// Dependencies
@Inject()
public service!: CommentService
// ...
} |
The thing is that import 'reflect-metadata'
import { AxiosInstance } from 'axios'
import Vue, { VueConstructor } from 'vue'
import VueTypeDI, { Container } from 'vue-typedi'
import tokens from '~/logic/tokens'
export function install (
vueConstructor: VueConstructor,
$axios: AxiosInstance,
): void {
vueConstructor.use(VueTypeDI)
Container.remove(tokens.AXIOS)
Container.set(tokens.AXIOS, $axios)
}
/* istanbul ignore next */
export default ({ $axios }): void => {
install(Vue, $axios)
} |
And // We use default Nuxt Module-based store,
// read more about it here:
// https://nuxtjs.org/guide/vuex-store
// TODO: document
import Vue from 'vue'
import Vuex from 'vuex'
import { createVuexStore } from 'vuex-simple'
import { Container } from 'vue-typedi'
import tokens from '~/logic/tokens'
import TypedStore from '~/logic/store'
Vue.use(Vuex)
// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
export default function store () {
if (!Container.has(tokens.AXIOS)) {
Container.set(tokens.AXIOS, (noop) => {})
}
const typedStore = new TypedStore()
// Registering DI container items:
Container.set(tokens.STORE, typedStore)
return createVuexStore(typedStore, {
'strict': false,
'modules': {},
'plugins': [],
})
} Service: import { AxiosInstance } from 'axios'
import { Service, Container } from 'vue-typedi'
import * as ts from 'io-ts'
import * as tPromise from 'io-ts-promise'
import tokens from '~/logic/tokens'
import { RawComment, RawCommentType } from '~/logic/comments/models'
@Service(tokens.COMMENT_SERVICE)
export default class CommentService {
protected get $axios (): AxiosInstance {
return Container.get(tokens.AXIOS) as AxiosInstance
}
/**
* Fetches comments from the remote API.
*
* @returns Parsed response data.
*/
public async fetchComments (): Promise<RawCommentType[]> {
// Note, that $axios has some custom methods, that are not used on purpose
// https://github.com/nuxt-community/axios-module#-features
const response = await this.$axios.get('comments')
return tPromise.decode(ts.array(RawComment), response.data)
}
} |
[x] bug report
[ ] feature request
[ ] question about the decisions made in the repository
[x] question about how to use this project
I have this
page
component innuxt
:When I use
fetch
method from Nuxt I see this error:But, if
fetch
is not used and I instead usefetchComments
method on button click - it works fine.I guess the reason is that
nuxt
handlesfetch
differently and something is not setup properly.The text was updated successfully, but these errors were encountered: