vuex - Vuex.js 侧边栏

Question

如何使用 Vuex 存储操作和变异来实现这个侧边栏？并且需要通过在元素旁边添加一个关闭按钮。

<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

标签： vuexsidebar

Answer 1

为了使用 Vuex 来实现这个功能，你需要做 3 件事

1. 突变
2. 吸气剂
3. 状态

侧栏的state将由 a 控制getter，可以通过 a 更改mutation

下面是一个使用 vuex 切换侧边栏的基本工作示例。

请注意，它不使用 getter，如果您不了解这些工作原理，我可以更详细地介绍

提琴手

下面是使用带有过渡效果的组件内部的切换。

提琴手

这是过渡的 Vue 文档Vue 过渡