- add example vuex store

src/main.ts

@@ -3,6 +3,7 @@ import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import routes from 'virtual:generated-pages'
 import App from './App.vue'
+import { store } from './store'
 
 import '@unocss/reset/tailwind.css'
 import './styles/main.css'
@@ -14,4 +15,5 @@ const router = createRouter({
   routes,
 })
 app.use(router)
+app.use(store)
 app.mount('#app')

src/store/index.ts

@@ -0,0 +1,9 @@
+import { createLogger, createStore } from 'vuex'
+import test from './modules/test'
+
+export const store = createStore({
+  modules: {
+    test,
+  },
+  plugins: [createLogger()],
+})

src/store/modules/test/actions.ts

@@ -0,0 +1,36 @@
+import type { Commit } from 'vuex'
+import * as types from './types'
+
+import type { HeroModel } from '~/types/models/heroModel'
+
+export function getHeroesAction({ commit }: { commit: Commit }) {
+  commit(types.LOADING_HERO, true)
+
+  // Temp
+  commit(types.GET_HEROES, 'GET')
+  commit(types.LOADING_HERO, false)
+}
+
+export function removeHeroAction({ commit }: { commit: Commit }, payload: string) {
+  commit(types.LOADING_HERO, true)
+
+  // Temp
+  commit(types.REMOVE_HERO, payload)
+  commit(types.LOADING_HERO, false)
+}
+
+export function addHeroAction({ commit }: { commit: Commit }, createdHero: HeroModel) {
+  commit(types.LOADING_HERO, true)
+
+  // Temp
+  commit(types.ADD_HERO, createdHero)
+  commit(types.LOADING_HERO, false)
+}
+
+export function updateHeroAction({ commit }: { commit: Commit }, updatedHero: HeroModel) {
+  commit(types.LOADING_HERO, true)
+
+  // Temp
+  commit(types.UPDATE_HERO, updatedHero)
+  commit(types.LOADING_HERO, false)
+}

src/store/modules/test/getters.ts

@@ -0,0 +1,9 @@
+import type { HeroStateType } from './state'
+
+const getters = {
+  heroes: (state: HeroStateType) => {
+    return state.heroes
+  },
+  loading: (state: HeroStateType) => state.loading,
+}
+export default getters

src/store/modules/test/index.ts

@@ -0,0 +1,12 @@
+import state from './state'
+import getters from './getters'
+import mutations from './mutations'
+import * as actions from './actions'
+
+export default {
+  namespaced: true,
+  getters,
+  mutations,
+  actions,
+  state,
+}

src/store/modules/test/mutations.ts

@@ -0,0 +1,28 @@
+import type { HeroStateType } from './state'
+import * as types from './types'
+import type { HeroModel } from '~/types/models/heroModel'
+
+const mutations = {
+  [types.GET_HEROES](state: HeroStateType, heroes: HeroModel[]) {
+    state.heroes = heroes
+  },
+
+  [types.LOADING_HERO](state: HeroStateType, toggle: boolean) {
+    state.loading = toggle
+  },
+
+  [types.REMOVE_HERO](state: HeroStateType, id: string) {
+    state.heroes = state.heroes.filter(h => h.id !== id)
+  },
+
+  [types.ADD_HERO](state: HeroStateType, createdHero: HeroModel) {
+    state.heroes.push(createdHero)
+  },
+
+  [types.UPDATE_HERO](state: HeroStateType, updatedHero: HeroModel) {
+    const index = state.heroes.findIndex(h => h.id === updatedHero.id)
+    state.heroes[index] = updatedHero
+  },
+}
+
+export default mutations

src/store/modules/test/state.ts

@@ -0,0 +1,21 @@
+import type { HeroModel } from '~/types/models/heroModel'
+
+export type HeroStateType = {
+  heroes: HeroModel[]
+  hero: HeroModel
+  loading: boolean
+}
+
+const state: HeroStateType = {
+  heroes: [],
+  hero: {
+    id: '',
+    firstName: '',
+    lastName: '',
+    house: '',
+    knownAs: '',
+  },
+  loading: false,
+}
+
+export default state

src/store/modules/test/types.ts

@@ -0,0 +1,6 @@
+export const LOADING_HERO = 'LOADING_HERO'
+
+export const GET_HEROES = 'GET_HEROES'
+export const REMOVE_HERO = 'REMOVE_HERO'
+export const ADD_HERO = 'ADD_HERO'
+export const UPDATE_HERO = 'UPDATE_HERO'

src/types/models/heroModel.ts

@@ -0,0 +1,7 @@
+export type HeroModel = {
+  id: string
+  firstName: string
+  lastName: string
+  house: string
+  knownAs: string
+}