Vuex.js sidebar - vuex

Question

How can using Vuex store action and mutation to implement this sidebar? And need by adding a close button in element aside.
<div id="example-1">
<button #click="show = !show">{{btnText}}</button>
<transition name="slide">
<aside v-show="show">hello</aside>
</transition>
</div>
<style>
.slide-enter-active {
transition: all .3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.slide-leave-active {
transition: all .1s ease;
}
.slide-enter, .slide-leave-active {
transform: translateX(100%);
}
</style>
<script>
new Vue({
el: '#example-1',
data: {
show: false
},
computed: {
btnText: function() {
if(this.show) {
return '✕'
}
return '☰'
}
}
})
<script>
https://codepen.io/pershay/pen/Pxgqwd

Answer 1

In order to use Vuex for this functionality you will want 3 things
mutation
getter
state
the state of the side bar will be controlled by a getter which can be changed by a mutation
Below is a basic working example of toggling a sidebar with vuex.
Note it is not using getter, if you don't understand how those work I can go into more detail
Jsfiddle
Below is using a toggle inside aside component with transition effect.
Jsfiddle
Here is Vue documentation for transitions Vue Transitions