Ways to implement type checking for vuex commit using TypeScript

In the Vuex store, I have an action tree structured like this

export const actions: SalaryActionTree<SalaryState, RootState> = {
    async setSalaryOperationUnpaidListByUserId(
       {commit}, {user_id, pageNum}) {
        try {
            let res = await SalaryOperationProvider.salaryOperationIndex({
                form: {
                    user_id,
                    payed: '0',
                },
                collectable: {pageNum},
            });
            commit({
                type: 'some-mutatation',
                data: res.data;
            });
        } catch (err) {

        }
    },
}

Is there a way to utilize TypeScript for typechecking of commit parameters here?

Answer №2

While it may not be the endorsed solution, you have the option to utilize direct-vuex.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for combining elements from various arrays into a single array?

I have an array of objects in Vue that I need to loop over. Each object contains a key value pair where the value is another array. My goal is to iterate through each object, and then within each object, loop over the arrays to gather all unique items into ...

Is it recommended to keep Angular properties private and only access them through methods?

I'm starting to get a bit confused with Angular/Typescripting. I originally believed that properties should be kept private to prevent external alteration of their values. Take this example: export class Foo{ private _bar: string; constructor(pr ...

Utilizing React-select Props Typings: A Guide

I'm currently working on creating a component that wraps the AsyncSelect, but I've run into an issue with their props having generics, and I'm not sure how to approach this. Below you'll find my code snippet: export class PipTagSelect ...

How can I use a string from an array as a key in an object using TypeScript?

I have been utilizing a for loop to extract strings from an array, with the intention of using these strings as object keys. Although this code successfully runs, TypeScript raises a complaint: const arr = ['one', 'two']; const map = ...

Achieving SPA navigation compatibility with an external framework that employs innerHTML for content rendering

Within my Vue.js application, I am utilizing a bootstrap-based framework to automatically generate the HTML code for my header and navigation menu with links. This generated content is then inserted into the page by setting the innerHTML of a designated mo ...

What could be the reason for parent props not updating in child components in VueJS?

Hello, I am new to VueJS and encountering an issue. In the main.js file, I am passing the user variable to App.vue using props. Initially, its value is {} The getLoginStatus() method in main.js monitors the firebase authentication status, and when a user ...

Is it possible to create a reusable TypeScript interface for an array of functions?

Currently working with Vue and Typescript, I'm exploring different ways to describe types for an array of functions. In my current code, I have the following setup. Is there a way I could define an interface called formRules instead of repeatedly decl ...

The elements within the NativeScript components are failing to show the data received from the Django API

My Django API is set up to provide a list of movies titles with their corresponding IDs. I've implemented a movie service in TypeScript that retrieves the list of movie titles and IDs using the GET operation. In my NativeScript project, I have two f ...

I am puzzled as to why I am still facing the error message: "'node' is not recognized as an internal or external command, operable program or batch file."

I'm in the process of setting up typescript for a new node project. Here are the steps I've taken so far: Installing typescript: npm i --save-dev typescript Installing ts-node: npm i --save-dev ts-node Installing the types definition for node ...

Leveraging non-React entities to seamlessly integrate components within a component hierarchy in React utilizing TypeScript

I am currently working on a React Typescript project where I am exploring the use of traditional polymorphism. Below is a simplified version of my project, where components are returned from vanilla Typescript objects rather than React components, allowing ...

Ways to dynamically apply a class to the interface according to the data condition in VueJS

User Interface : https://i.sstatic.net/JZjNO.png What triggers the addition of the Row-reverse class when the returned record index is an even number? ...

Object data is not being received by the defaultValue in React Hook Form

I am currently utilizing React Hook Form to facilitate the process of editing/updating data. I retrieve my data from zustand with a value type of any, and then proceed to save it as the defaultValue in React Hook Form. However, when attempting to acquire v ...

Tips for integrating leaflet maps according to the number of elements in your dataset

I'm looking to incorporate leaflet maps onto my page, under the following conditions: If there is only one map, it should span the entire width using bootstrap grid columns. If there are two maps, they should be placed side by side with equal column ...

What could be the reason for mocha failing to function properly in a project that is set up

During a unit test in my TypeScript project using mocha, I encountered an issue when setting the project type to module. The error message displayed is as follows: ➜ typescript-project yarn test yarn run v1.22.17 warning package.json: No license field $ ...

What are some practical applications for using the argument in a Vue.js directive?

Seeking clarification on the practical applications of using Vue.js directives arg and modifiers. While data can be passed as an object in the value field of a directive, I'm struggling to grasp the necessity of utilizing arg and modifiers. For insta ...

Vue.js 2: Sorting ul list based on user input text

Is there a way to filter a list dynamically based on either the name or initials that a user types into an input field? I am currently utilizing vue.js 2 for this task. The list is populated by accessing a store variable which stores data from a JSON file. ...

How can I define Record values in Typescript based on their specific keys?

I am working on creating a custom data structure that allows me to store values with string keys within the union string | number | boolean: type FilterKey = string; type FilterValue = string | number | boolean; type Filters<K extends FilterKey, T exten ...

Sweetalert continues to delete items despite selecting "NO" option

While working on a Laravel project, I decided to practice CRUD operations using AJAX. In one of my tasks, I wanted to display a confirmation message using SweetAlert before deleting a field from the database. The SWAL alertbox had a message that said "Do ...

"Utilize the createReducer function with builder syntax to handle callbacks

Having trouble using createReducer with the builder syntax to update the auth state based on user login success or failure. Running into TS2769 error specifically in the second builder.addCase where adjusting the state for failed logins. Seeking assistance ...

Empty Array returned in VueJS after Axios GET request | VUEJS/LARAVEL

Currently, I am working on a project for my university while also learning how to build a single page application through a Udemy course. The issue I'm facing is related to pushing data from a JSON database query named "alunos" to the front end using ...