Exploring NuxtJS Vuex Module namespaces and mutation enumerations

My NuxtJS website has a Vuex store with a root state and a module located at store/shop/cart/state.ts. Within the module, there is a file called store/shop/cart/mutations.ts.

import { MutationTree } from 'vuex';
import { CartState } from './state';
import { Cart } from '~/types/Cart';

export enum CartMutations {
  SET_CART = 'SET_CART',
}

const mutations: MutationTree<CartState> = {
  [CartMutations.SET_CART](
    state: CartState,
    payload: { cart: Cart }
  ) {
    state.cart = payload.cart;
  },
};

export default mutations;

In my middlewares, I want to commit the mutation like this.

store.commit(CartMutations.SET_CART, cart);

However, because of namespacing, the action is named shop/cart/SET_CART. This forces me to use a different syntax that does not utilize the enum.

store.commit('shop/cart/SET_CART', cart);

Has anyone else encountered this issue? I'm looking for a clean solution to work around it while maintaining namespaces.

Answer №1

Utilizing mapMutations() can be really helpful in situations like this.

To get a better understanding of namespace binding, take a look at the explanation provided in the official Vue documentation.

In this scenario, my approach would be as follows:

// Store constant declaration file
export const SHOP_CART_STORE = 'shop/cart';

// Component script
import {SET_CART} from 'CartStore';

{
  methods: {
    ...mapMutations(SHOP_CART_STORE, {setCart: SET_CART}),
    performTask(cart) {
      this.setCart(cart);
    }
  }
}

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

Exploring Reactive Programming with RxJS and organizing data into individual streams

As I delve deeper into working reactively with Angular 15 and RxJS observables for a UI component, my focus lies on subscribing to data solely within the component template (html). The data is fetched from an external system through a service. However, a c ...

Trapped in the Google Maps labyrinth (Angular)

Hey there everyone! I'm currently working on an exciting angular application that integrates the Google Maps API. The goal is to create a feature that shows the 20 closest coffee shops based on the user's current location. However, I seem to be r ...

Combining subclasses in TypeScript

Do you need help with a tricky situation? ...

Why is Nuxt.js launching in a Linux virtual machine but not in a Docker container?

I've encountered varying results when launching a Nuxt app from the Windows subsystem for Linux versus starting the same app in Docker. While I have experience dockerizing other apps, this particular issue has me stumped. WSL Connections are being l ...

Testing the integration of socket.io with Angular through unit tests

Currently, I am in the process of unit testing an angular service within my application that is responsible for creating a socket.io client. The structure of my service can be seen below: export class SocketService { private name: string; private host ...

Unable to automatically redirect to portal upon submission of form

After successfully logging the user into my app, I want to redirect them imperatively to the portal page. However, when I use the router.navigate() function, a few things happen that are causing issues. First, the app redirects to /portal. Then, it immedia ...

Retrieve JSON data within a service and provide it to a component

I am currently facing an issue with loading data from a JSON file into my component using a service. The data is successfully loaded in the service, as confirmed by the console log; however, when trying to access the data in the component, it does not disp ...

Is it possible to export all types/interfaces from .d.ts files within multiple folders using index.ts in a React TypeScript project?

In my current React project, I am managing multiple configuration folders: -config -api/ |index.ts |types.d.ts -routes/ |index.ts |types.d.ts ... For example, in the api/index.ts file, I can import necessary types using import {SomeTyp ...

Using vue js to implement a search filter within a b-table component

I am using b-table to display data, and for the JSON, I am utilizing this link. In this setup, I have limited the displayed data to 5 entries. The b-table is equipped with a filter and search function. Specifically, I am looking to locate an email associ ...

How should one go about creating an npm package out of a vuejs component and testing it locally?

Initially, I created a vuejs project as a test container using vue-cli. Next, I developed an npm package named "vue-npm-example" from a Vuejs component in my local environment and then imported it into the aforementioned testing project. Within the packag ...

Typescript's Patch<T> type enforces strictness within the codebase

There have been instances where I needed to 'patch' an object T using Object.assign(). For instance, when propagating changes you might modify a stateful object that other code references (common in reactive programming like MobX or Vue). It&ap ...

Determine the data type of a parameter by referencing a prior parameter

Consider a scenario in my software where I have two distinct implementations of an Event Emitter. For instance: type HandlerA = (data: boolean) => void; type HandlerB = (data: number) => void; // HandlerB is somehow different from HandlerA type Eve ...

Utilizing Additional Parameters in Vuetify Rule Declarations

I am looking to establish a set of rules that can be applied universally across all fields. In order to achieve this, I need the ability to include additional parameters in my rules, such as setting a maxlength of 20 for one field and a maxlength of 50 f ...

Encountering issues with compiling the Firebase NPM package on Vue 3

After adding firebase as an npm package and importing it into the vue project, I encountered a specific error when attempting to run the project. The error message stated: ERROR Failed to compile with 1 error ...

Implement a function within a v-for iteration

Currently, I am facing a challenge in Vue 3 while attempting to design a menu with categories and corresponding subcategories. The objective is that upon clicking on a category, only the specific subcategories related to that category should be displayed b ...

Compiling Typescript with union types containing singleton types results in errors

I'm having trouble understanding why the code below won't compile: type X = { id: "primary" inverted?: boolean } | { id: "secondary" inverted?: boolean } | { id: "tertiary" inverted?: false } const a = true const x: X = { id: a ? ...

Unable to display data retrieved from axios in a datatable using VueJS

I'm currently attempting to retrieve data from axios and display it in a datable component. The hardcoded data is being rendered successfully every time, but I am struggling to integrate the data from the axios call. I am fetching data in the same for ...

Dealing with Cross-Origin Resource Sharing problem in a React, TypeScript, Vite application with my .NET backend

I'm encountering a CORS issue when trying to make a Request using Fetch and Axios in my application hosted on the IIS Server. Here are my Server API settings: <httpProtocol> <customHeaders> <add name="Access-Control-Allow-O ...

Keep your eyes peeled for updates in jquery movements

Is there a way to detect changes in HTML content? I have a button that adds more HTML, but when I save the data using ajax, it doesn't capture the added HTML. Currently, when I click save, the new HTML is not recognized. $("#more_column").click(func ...

Registering components globally in Vue using the <script> tag allows for seamless integration

I'm currently diving into Vue and am interested in incorporating vue-tabs into my project. The guidelines for globally "installing" it are as follows: //in your app.js or a similar file // import Vue from 'vue'; // Already available imp ...