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
actions-user: {{ vassal.user }}
actions-name: {{ vassal.name }}
getters: {{ vassal.newName }}