I'm in the process of adapting these Redux actions to Vuex.
Upon examination, I noticed that the actions have
2 placeholders(I'm unsure of the correct term)For illustration purposes, it looks something like this:
export const priceAction = (amount)//first placeholder => async (dispatch, getState)//second placeholder => { ... }
Now, in my Vue project, I'm attempting to organize Vuex in a modular way, like this:
Here's how the Price module is structured:
store/module/Price
/ actions.ts
/ index.ts
In the Price/actions.ts
export const priceAction = (amount: number) => async ({commit, dispatch}: ActionContext<State, RootStateType>, state: State) => { ... }
In the Price/index.ts
import * as actions from './actions'
import { state } from './state-type'
export default {
namespaced: true,
state: state,
getters: {},
mutations: {},
actions: actions
}
Now, in the main reducer file store.ts
import Price from './module/Price'
export const store = createStore({
modules: {
Price //-> This leads to a series of errors
}
})
The errors:
- Types of property 'actions' are incompatible.
- Type 'typeof import("D:/workspaces/proj/myproj/src/store/modules/Price/actions")' is not assignable to type 'ActionTree<any, { mainStore: string; }>'.
- Property 'priceAction ' is incompatible with index signature.
- Types of parameters 'amount' and 'injectee' are incompatible.