Skip to content

Separate/Breakdown store vuex file to make cleaner #513

Open
@bsor-dev

Description

@bsor-dev

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')
  },
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions