Advanced Vuex State Management application is based on Vue 3, written in typescript ✨🎯

https://vuex.vuejs.org/

What is Vuex?

When Should I Use It?

Advance Vuex Application Example

npm install vuex@next --save
// state.tsimport { Post } from '@/types'export interface State {
post?: Post
postList?: Post[]
error: boolean
}
// getters.tsimport { GetterTree } from 'vuex'
import { State } from './state'
import { RootState } from '@/store/types'
import { Post } from '@/types'
export const getters: GetterTree<State, RootState> = {
getPost(state): Post | undefined {
const { post } = state
return post
},
getPostList(state): Post[] | undefined {
const { postList } = state
return postList
}
}
// actions.tsimport { ActionTree } from 'vuex'
import { State } from './state'
import { RootState } from '@/store/types'
import { Post } from '@/types'
import axios from 'axios'
const url = 'https://jsonplaceholder.typicode.com/posts/'export const actions: ActionTree<State, RootState> = {
async getById({ commit }, id: string): Promise<any> {
await axios.get(url + id).then(response => {
const data: Post | Post[] = response && response.data
commit('getById', data)
return Promise.resolve(data)
}).catch(error => {
return Promise.reject(error)
})
},
async getAll({ commit }): Promise<any> {
await axios.get(url).then(response => {
const data: Post | Post[] = response && response.data
commit('getAll', data)
return Promise.resolve(data)
}).catch(error => {
return Promise.reject(error)
})
},
}
// mutations.tsimport { Post } from '@/types'
import { MutationTree } from 'vuex'
import { State } from './state'
export const mutations: MutationTree<State> = {
getById(state, payload: Post) {
state.error = false
state.post = payload
},
getAll(state, payload: Post[]) {
state.error = false
state.postList = payload
},
}
// index.tsimport { Module } from 'vuex'
import { getters } from './getters'
import { actions } from './actions'
import { mutations } from './mutations'
import { State } from './state'
import { RootState } from '@/store/types'
export const state: State = {
post: undefined,
postList: undefined,
error: false
}
const namespaced = trueexport const post: Module<State, RootState> = {
namespaced,
state,
getters,
actions,
mutations
}
import Vuex, { StoreOptions } from 'vuex'
import { RootState } from './types'
import { post } from './modules/post'
const store: StoreOptions<RootState> = {
state: {
version: '1.0.0' // a simple property
},
modules: {
post,
}
}
export default new Vuex.Store<RootState>(store)
// PostList.vue<template>
<post-card v-for="(post, i) in postList" :key="i" :post="post" />
</template>
<script lang="ts">
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
import PostCard from "./PostCard.vue";
export default defineComponent({
components: {
PostCard,
},
setup() {
// data
const store = useStore();
// computed
const postList = computed(() => store.state.post.postList);
// created
store.dispatch("post/getAll");
return {
postList,
};
},
});
</script>

Software Engineer