# Tooling
Vuexok internally uses vuex. The main purpose of creating vuexok was not to create a new api, but to extend the current vuex api. Therefore, when migrating, you will not need to rewrite the component code.
# Module creation
WARNING
Please note that vuexok creates dynamic modules. All modules will be registered after the store has been created using the store.registerModule (opens new window) method
Notice how the plus mutation is called from the increment action
import { createModule } from 'vuexok'
import store from '@/store'
export const counterModule = createModule(
'counterModule',
{
namespaced: true,
state: {
count: 0,
},
actions: {
async increment() {
counterModule.mutations.plus(1)
},
},
mutations: {
plus(state, payload:number) {
state.count += payload
},
setNumber(state, payload:number) {
state.count = payload
},
},
getters: {
x2(state) {
return state.count * 2
},
},
}
)
counterModule.register(store)
TIP
So that several modules do not react to the same type of mutations / actions, it is recommended to create modules with their own namespace by specifying the namespaced: true
(opens new window) option
# Using Vuexok Module in Vue Components
The state property in a module is reactive, just like in [store.state] (https://vuex.vuejs.org/guide/state.html#getting-vuex-state-into-vue-components), so to use the state of the module in Vue components it is enough to simply return part of the module state in the [computed property] (https://v3.vuejs.org/guide/reactivity-computed-watchers.html).
import { counterModule } from '@/store/modules/counterModule'
const Counter = Vue.extends({
template: `<div>{{ count }}</div>`,
computed: {
count() {
return counterModule.state.count // type number
},
},
})
# Vue Class Based Components
import Vue from 'vue'
import { counterModule } from '@/store/modules/counterModule'
import Component from 'vue-class-component'
@Component({
template: '<div>{{ count }}</div>'
})
export default class MyComponent extends Vue {
private get count() {
return counterModule.state.count // type number
}
}
# Composition API
import { computed, defineComponent } from '@vue/composition-api'
import { counterModule } from '@/store/modules/counterModule'
export default defineComponent({
template: '<div>{{ count }}</div>',
setup() {
return {
count: computed(() => counterModule.state.count)
}
},
})
# Calling actions and mutations
# Actions
import { counterModule } from '@/store/modules/counterModule'
// Similar to
// store.dispatch('counterModule/increment').then(() => {
// console.log('increment called')
// })
counterModule.actions.increment().then(() => {
console.log('increment called')
})
# Mutations
import { counterModule } from '@/store/modules/counterModule'
// Similar to
// store.commit('counterModule/setNumber', 10)
counterModule.mutations.setNumber(10)
# Watch
Module watchers work the same way as store.watch (opens new window). The only difference is that the state and getters of the module are passed as parameters of the getter function.
const unwatch = jwtModule.watch(
(state, getters) => getters.jwt,
(jwt) => console.log(`New token: ${jwt}`),
{ immediate: true },
)
← Introduction Worker →