typescript icon indicating copy to clipboard operation
typescript copied to clipboard

Separate/Breakdown store vuex file to make cleaner

Open bsor-dev opened this issue 4 years ago • 0 comments

In NuxtJS its easy to breakdown vuex file into separate files like e.g

📦store ┣ 📂auth ┣ 📂utils ┣ 📂posts ┃ ┗ 📜actions.js ┃ ┗ 📜mutations.js ┃ ┗ 📜getters.js ┃ ┗ 📜index.js ┣ index.js

These are what I commonly doing in JS version. Here in nuxt typescript I tried to do same thing but don't know how to properly export actions mutations and getters

under store/user/index.ts is working fine.

export const state = () => ({
  things: [] as string[],
  name: 'Me',
})

export type RootState = ReturnType<typeof state>

I tried to do in action but I got an error actions should be function or object with "handler" function but "actions.action" in module "user" is {}

import { ActionTree } from 'vuex'
import { RootState } from '.'

export const action: ActionTree<RootState, any> = {
  async fetchThings({ commit }) {
    await Promise.resolve('data')
    commit('CHANGE_NAME', 'New name')
  },
}

bsor-dev avatar Jul 10 '21 14:07 bsor-dev