CodePamoja
CodePamoja means "Code Together" in Swahili. We are a group of passionate developers in The Netherlands and Kenya working together in virtual teams, transferring the latest software development skills to each other.
Vuex
statemanagement with
State of a single
Vue component
Single Vue component
State of a single Vue component
one-way data flow
State, data property. Actions, methods property.
View, template property.
Share data
between components
parent to child
Parent to Child
Parent to Child
<template>
<h1>{{ value }}</h1>
</template>
<script>
export default {
name: "counter",
props: ["value"]
};
</script>
<style>
// ...
</style>
<template>
<div id="app">
<counterValue :value="count"></counterValue>
<button v-on:click="increment">increment</button>
<button v-on:click="decrement">decrement</button>
</div>
</template>
<script>
// ...
// state
data() {
return {
count: 2
};
},
// ...
</script>
<style>
// ...
</style>Share data
between components
child to parent
Child to Parent
<template>
<h1>{{ value }}</h1>
</template>
<script>
export default {
name: "counter",
props: ["value"]
};
</script>
<style>
// ...
</style>
<template>
<div id="app">
<counterValue :value="count"></counterValue>
<button v-on:click="increment">increment</button>
<button v-on:click="decrement">decrement</button>
</div>
</template>
<script>
// ...
// state
data() {
return {
count: 2
};
},
// ...
</script>
<style>
// ...
</style>Child to Parent
Updating multiple
Vue components
Challenges
- Sharing state with multiple components
- Updating multiple components based on a shared state
- Changing data in the state
Updating multiple
Vue components
with Vuex
Multiple vue components state
Flow
- Vue component does a dispatch to an action.
- The action does a get request.
- Calls the mutation.
- Mutation will merge old data with new.
- Now the state has changed. By the mutation.
- New data is rendered in all vue components that are attached.
Vuex
By CodePamoja
