Classbased Typescript implementation for managing state with a Vuex store

Question

Classbased Typescript implementation for managing state with a Vuex store

Hey everyone, I'm currently working on a Vue project with Vuex using decorators for strong typing in my template.

As someone new to the concept of stores, I am struggling to understand how to properly configure my store to work as expected in my components.

My end goal is to be able to call the actions and getters of my different store modules like this:

this.$store.nameOfMyModule.NameOfAction
this.$store.<nameOfMyModule.NameOfGetter

An example specific to my project would be:

this.$store.tickets.tickets
this.$store.tickets.fetchTickets

Here is the link to the repository.

typescript vue.js vuex decorator store

Answer 1

Answer №1

Consider utilizing mapActions and mapGetters for a more organized approach:

import { mapActions, mapGetters } from 'vuex'

//...

computed: {
   ...mapGetters('tickets', [
        tickets
   ]),
   ...mapGetters('users', [
        users
   ])
},

methods : {
   ...mapActions('tickets', [
        fetchTickets
   ]),
   ...mapActions('users', [
        fetchUsers
   ])
}
//...

Following this, you can easily access this.fetchTickets() and this.tickets in your component.

Remember to assign fetchUsers to the action's users module instead of fetchTickets.

Answer 2

Consider utilizing mapActions and mapGetters for a more organized approach:

import { mapActions, mapGetters } from 'vuex'

//...

computed: {
   ...mapGetters('tickets', [
        tickets
   ]),
   ...mapGetters('users', [
        users
   ])
},

methods : {
   ...mapActions('tickets', [
        fetchTickets
   ]),
   ...mapActions('users', [
        fetchUsers
   ])
}
//...

Following this, you can easily access this.fetchTickets() and this.tickets in your component.

Remember to assign fetchUsers to the action's users module instead of fetchTickets.

Classbased Typescript implementation for managing state with a Vuex store

Answer №1

Similar questions

The presence of fs.existsSync as a function is not recognized when importing electron

The DOM fails to reflect changes in the data variable in VueJS

Finding the total amount in VueJS2

Retrieve distinct values for the keys from an object array in JavaScript

Include additional information beyond just the user's name, profile picture, and identification number in the NextAuth session

Is there a way to insert data from one table into a MySQL Table in Drizzle and update the entry if it already exists?

Utilizing i18n translation in Vuejs 3 with the new "script setup" feature

applying conditional rendering in vue.js

Taking advantage of Input decorator to access several properties in Angular 2

Error occurred during production at the latest version. The failure happened in the 'Install dependencies' stage due to the dependency_installation script returning a non-zero exit code of 1

`Managing select tag data in Angular reactive forms`

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

How to turn off automatic password suggestions in Chrome and Firefox

Internet Explorer is throwing unexpected routing errors in Angular 2

Retrieve the data from a pouchdb attachment

Can an entire object be bound to a model in an Angular controller function?

Error message: "Mismatched data types in Formik errors when utilizing TypeScript"

What is the best way to reset an imported file with each test in viTest?

What is the best way to utilize mapping and filtering distinct values in an array using TypeScript?

Utilizing FontAwsome Icons within a CSS2DObject using VueJS