Vue: pinia


 main.ts

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'


const store = createPinia()
const app = createApp(App)
app.use(store)
app.mount('#app')

store-namespace.ts

export const enum Names {
  test = 'TEST',
  vaunt = 'VAUNT'
}

index.ts

import { defineStore } from 'pinia'
import { Names } from './store-namespace'


type User = {
  name: string,
  age: number
}

const result: User = {
  name: 'pppp',
  age: 555
}

const Login = (): Promise => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        name: 'resolved name',
        age: 5555
      })
    }, 2000)
  })
}
export const useVauntStore = defineStore(Names.vaunt, {
  state: () => {
    return {
      // current: 55,
      user: {},
      name: 'rtyu'
    }
  },
  // computed
  getters: {
    newName(): string {
      return `$-${this.name}--${this.getUserAge}`
    },
    getUserAge(): number {
      return this.user.age || 66
    }
  },
  // methods
  actions: {
    // setCurrent() {
    //   this.current++
    // }
    setCurrent(n: number): void {
      // this.current = n
    },
    async setUser() {
      this.user = await Login()
      this.setName('uiop')
    },
    setName(name: string) {
      this.name = name
    }
  }
})

App.vue



vue