Vuex 4 in Vuejs 3, with the composition api

Too long to read: yes, you can use vuex 4 with the composition api. Hints on how to do this are, at present, hidden in git repo’s and discord channels, so I thought I’d share the secret here.

This is mostly from github.com/vuejs/vuex/tree/4.0/examples/composition/counter

A template file could look like the below. I bolded the essential parts:

<template>
<div id="app">
Clicked: {{ count }} times, count is {{ evenOrOdd }}.
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementIfOdd">Increment if odd</button>
<button @click="incrementAsync">Increment async</button>
</div>
</template>

<script>
import { computed } from 'vue'
import { useStore, } from 'vuex'

export default {
name: 'counter',
setup () {
 const store = useStore();
  return {
   count: computed(() => store.state.count),
   evenOrOdd: computed(() => store.getters.evenOrOdd),
   increment: () => store.dispatch('increment'),
   decrement: () => store.dispatch('decrement'),
   incrementIfOdd: () => store.dispatch('incrementIfOdd'),
   incrementAsync: () => store.dispatch('incrementAsync')
  }
}}
</script>

That’s really the most difficult part 😁. But to complete the example, here’s how to include vuex in your main.js:

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/store'

createApp(App)
.use(store)
.mount('#app')

And here’s how a sample store could look:

import { createStore } from 'vuex'

// root state object.
// each Vuex instance is just a single state tree.
const state = {
count: 0
}

// mutations are operations that actually mutate the state.
// each mutation handler gets the entire state tree as the
// first argument, followed by additional payload arguments.
// mutations must be synchronous and can be recorded by plugins
// for debugging purposes.
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count--
}
}

// actions are functions that cause side effects and can involve
// asynchronous operations.
const actions = {
increment: ({ commit }) => commit('increment'),
decrement: ({ commit }) => commit('decrement'),
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit('increment')
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('increment')
resolve()
}, 1000)
})
}
}

// getters are functions.
const getters = {
evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

// A Vuex instance is created by combining the state, mutations, actions,
// and getters.
export default createStore({
state,
getters,
actions,
mutations
})

This post is nothing more than a search engine friendly way to share that git-repo. So thanks to kiaking as usual.

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.