I have been using Vue.js and Vuex for a while now, but always with JavaScript.
Recently, I decided to try using Vue with TypeScript, specifically with nuxt.js, but without utilizing decorators or style-class-components. I want to stick to the normal Vue syntax.
Below is the code from my Vuex store:
/store/todos/types.ts
export interface Todo {
id: number
text: string
done: boolean
}
export interface TodoState {
list: Todo[]
}
/store/todos/state.ts
import { TodoState } from './types'
export default (): TodoState => ({
list: [
{
id: 1,
text: 'first todo',
done: true
},
{
id: 2,
text: 'second todo',
done: false
}
]
})
/store/todos/mutations.ts
import { MutationTree } from 'vuex'
import { TodoState, Todo } from './types'
export default {
remove(state, { id }: Todo) {
const index = state.list.findIndex((x) => x.id === id)
state.list.splice(index, 1)
}
} as MutationTree<TodoState>
/store/todos/actions.ts
import { ActionTree } from 'vuex'
import { RootState } from '../types'
import { TodoState, Todo } from './types'
export default {
delete({ commit }, { id }: Todo): void {
commit('remove', id)
}
} as ActionTree<TodoState, RootState>
/store/todos/getters.ts
import { GetterTree } from 'vuex'
import { RootState } from '../types'
import { TodoState, Todo } from './types'
export default {
list(state): Todo[] {
return state.list
}
} as GetterTree<TodoState, RootState>
Here is the code in my component:
<template>
<div>
<ul>
<li v-for="todo in todos" :key="todo.id">
{{ todo.text }}
<button @click="destroy(todo)">delete</button>
</li>
</ul>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import { mapGetters, mapActions } from 'vuex'
export default Vue.extend({
computed: {
...mapGetters({
todos: 'todos/list'
})
},
methods: {
...mapActions({
destroy: 'todos/delete'
})
}
})
</script>
Everything seems to be working fine, except for the lack of auto-complete/intellisense for getters or actions provided by Vuex.
If anyone can help me with this issue, I would greatly appreciate it!
Thank you so much! o/