【Vue】Example of Writing store.js in Vuex and How to Split Files
Thank you for your continued support.
This article contains advertisements that help fund our operations.
Table Of Contents
This article summarizes examples of how to write store.js in Vue.js with Vuex and how to split the files.
Introduction
Vue.js has differences in how it is written between Vue 2 and Vue 3. This article covers both versions.
Please refer to the section that matches your environment.
Basic Way of Writing store.js
Vue 3
import { createStore } from "vuex"
export default createStore({
state: {
count: 0,
},
mutations: {
incrementCount(state) {
state.count += 1
},
reduceCount(state) {
state.count -= 1
},
},
actions: {
incrementCount({ commit }) {
commit("incrementCount")
},
},
getters: {},
modules: {
//
},
})Vue 2
export default new Vuex.Store({
// The content inside is the same as in Vue 3
state: {},
mutations: {},
actions: {},
getters: {},
modules: {},
})Once you have written up to this point, add the following to check if the setup works correctly:
<template>
<div>{{ $store.state.count }}</div>
</template>How to Split Vuex Files
Basically, you write the logic in the split files and then import them into store.js and add them to the modules.
Create store/like.js
A like.js file has been created.
Write in the Split File
Write in store/like.js
const getters = {}
const state = {
count: 0,
}
const mutations = {
incrementCount(state) {
state.count += 1
},
}
const actions = {
incrementCount({ commit }) {
commit("incrementCount")
},
}
export default {
namespaced: true,
getters,
state,
mutations,
actions,
}Add to Modules in store.js
Vue 3
import like from "./store/like"
export default createStore({
modules: {
like,
},
})Vue 2
import like from "./store/like"
export default new Vuex.Store({
modules: {
like,
},
})Confirm by Displaying
For index.vue or Similar
<template>
<div>
{{ $store.state.like.count }}
</div>
</template>If you see the count displayed, the split setup is complete.
How to Call the Logic from Split Files
Actions
Vue 3
<script setup>
import { useStore } from "vuex"
const store = useStore()
const handleEvent = () => {
store.dispatch("like/incrementCount")
}
</script>Vue 2
<script>
export default {
methods: {
...mapActions("like", ["incrementCount"]), // This makes the incrementCount function usable within this component
},
}
</script>State
In both Vue 3 and Vue 2, you can access it using . notation.
<template>
<div>
{{ $store.state.like.count }}
</div>
</template>Getters
Vue 3
<template>
<div>{{ tripleCount }}</div>
</template>
<script setup>
import { useStore } from "vuex"
import { computed } from "vue"
const store = useStore()
const tripleCount = computed(() => store.getters["like/tripleCount"]) // Assuming tripleCount is a function written in the getters of like.js
</script>Vue 2
<template>
<div>{{ tripleCount }}</div>
</template>
<script>
import { mapActions, mapGetters } from "vuex"
export default {
computed: {
...mapGetters("like", ["tripleCount"]), // Assuming tripleCount is a function written in the getters of like.js
},
}
</script>Conclusion
That's an overview of examples for writing store.js in Vue.js with Vuex and how to split files.
Since Vue 3 uses the Composition API, the code differs significantly from Vue 2.
I hope this helps someone.
