Source:  Twitter logo

normally I was using namespaced vuex. But I am deciding to quit vuex because Pinia has the vue core team support. I think it's better for the future developements. Now I am creating store with a modular approach but couldn't really understand how to handle that part on typescript project.

let's say I have a user interface.

interface User {
  email: string,
  username: string,
}

export default User;

and in store/modules/state.ts I am calling the Type and creating a user state.

import User from "../../types/User"

export const state = () => {
  return {
    user: {} as User | null,
  };
}

and in store/modules/index.ts I should import the state. And make the namespace: true then export it for the defineStore() for pinia store.

import {state} from "./state"

export default {
  namespace: true,
  state,
}

in store/index.ts

import {defineStore} from "pinia"
import {data} from "./modules"

export const Store = defineStore(data)

okay above, namespace part I use the vuex way. But what is the right approach for the pinia. Additionally, getters and actions as well. How should export and use them.

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).