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

Exploring the concept of 'Abstract classes' within the Svelte framework

Unable to compile TypeScript files using gulp while targeting ES5

Tips for maintaining an open ng-multiselect-dropdown at all times

The Vue.js auto-suggest input feature is causing the HTML layout to have excess whitespace

Having difficulty understanding Symbol.iterator and the return value type in a for-of loop while using TypeScript

Is it secure to transmit Tenant ID's as GET parameters to the API in a Multi-Tenant database environment?

Why does Vue reset a v-binded property when a v-model property changes?

Issue with Vue3: The imported module is not defined

Tips for implementing a selection event in an auto complete dropdown menu:

Display the React component following a redirect in a Next.js application that utilizes server-side rendering

Ways to perform testing on SetTimeout function invoked in VUE Created HOOK using Vue utilities and JEST

Creating an array of objects data is a breeze with Vue.js

Problem with Ionic 2 checkboxes in segment controls

I am experiencing an issue with the PUT method on my API as it is not correctly setting the req.body data

Can you provide guidance on how to access and utilize images within vue components?

What is the best way to include a Web Service within an export variable in Angular 2 using TypeScript?

TypeScript equivalent to Python's method for removing non-whitespace characters is achieved by

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

Since updating from Angular 16 to 17, I am experiencing a TypeScript compilation issue specifically related to 'openui5'

Utilizing Input Value from Parent Component in Angular TypeScript File: A Guide