es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Función de Javascript con 2 argumentos.

04 Aug, 2023 Programación

Estoy tratando de convertir estas acciones de Redux en acciones de Vuex. Observé que las acciones tienen 2 “holders” (no conozco el término) para el argumento. Para dar un ejemplo, se ve así:

export const priceAction = (amount) => async (dispatch, getState) => { … }

Ahora en mi vue, estoy tratando de modularizar el vuex, de esta manera:

Cómo se ve el módulo “Price”:

store/module/Price
/ actions.ts
/ index.ts

En “Price/actions.ts”:

export const priceAction = (amount: number) => async ({commit, dispatch}: ActionContext<state, rootstatetype=””>, state: State) => { … }

En “Price/index.ts”:

import * as actions from ‘./actions’
import { state } from ‘./state-type’

export default {
namespaced: true,
state: state,
getters: {},
mutations: {},
actions: actions
}

Ahora, en el reducer principal “store.ts”:

import Price from ‘./module/Price’
export const store = createStore({
modules: {
Price //-> Esto me muestra una serie de errores
}
})

Los errores:

  • Los tipos de propiedad ‘actions’ no son compatibles.
  • El tipo ‘typeof import(“D:/workspaces/proj/myproj/src/store/modules/Price/actions”)’ no se puede asignar al tipo ‘ActionTree<any, {=”” mainstore:=”” string;=”” }=””>’.
  • La propiedad ‘priceAction’ es incompatible con la firma de índice.
  • Los tipos de los parámetros ‘amount’ e ‘injectee’ no son compatibles.</any,></state,>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Los errores sugieren que hay un problema con los tipos de las acciones en el módulo de Precios. Parece que los tipos que se usaron en las acciones de Redux no son compatibles con el ActionTree de Vuex. El primer paso para resolver este problema sería tipar adecuadamente las acciones de Vuex para que coincidan con los tipos esperados.

    En Price/actions.ts, asegúrate de que la acción tenga los tipos correctos para commit, dispatch, state y cualquier argumento que se pase a la acción.

    import { ActionContext } from 'vuex'
import { State, RootStateType } from './state-type'

export const priceAction = (amount: number) => async ({commit, dispatch}: ActionContext<state, rootstatetype="">, state: State) => { ... }

    Luego, en Price/index.ts, importa el tipo ActionTree de Vuex y úsalo para tipar correctamente la propiedad actions.

    import { ActionTree } from 'vuex'
import * as actions from './actions'
import { state, State } from './state-type'

export interface PriceActions extends ActionTree<state, rootstatetype=""> {
  priceAction: (context: ActionContext<state, rootstatetype="">, amount: number) => Promise<void>
}

export default {
  namespaced: true,
  state,
  getters: {},
  mutations: {},
  actions: actions as PriceActions
}

    Por último, en store.ts, asegúrate de que el módulo Price esté correctamente tipado importando el tipo PriceActions y usándolo para la propiedad actions.

    import { createStore, Store } from 'vuex'
import Price, { PriceActions } from './module/Price'

export interface RootStateType {
  mainStore: string
}

export interface RootState extends Store<rootstatetype> {
  getters: {
    ...
  }
}

export const store = createStore<rootstatetype>({
  modules: {
    Price
  }
})

// Opcional: Tipar correctamente store.dispatch para las acciones de Price
declare module 'vuex' {
  interface Dispatch {
    <t extends="" keyof="" priceactions="">(type: T, payload?: Parameters<priceactions[t]>[1], options?: DispatchOptions): ReturnType<priceactions[t]>
  }
}

    Con estos cambios, la tienda y los módulos de Vuex deberían estar correctamente tipados y los errores deberían resolverse.</priceactions[t]></priceactions[t]></state,></state,></state,>

Comments are closed.