时间戳

首页 > 解决方案 > 在商店中存储引导切换

vue.js - 在商店中存储引导切换

问题描述

有没有办法在 vuex 商店中存储切换的 vue-bootstrap 视图？

    <div class="mb-5 mt-5">
        <button class="mr-2 button_class" v-b-toggle="'searchByName searchBySeason'">toggle</button>
    </div>
    
    <b-collapse id="searchByName" visible>
      // stuff
    </b-collapse>

    <b-collapse id="searchBySeason">
      // stuff
    </b-collapse>

我想存储切换元素的状态，以便在重新加载页面后它仍然存在。

标签： vue.jsvuexbootstrap-vue

解决方案

您可以将属性绑定到<b-collapse>'s v-model，这将是true或false取决于折叠状态。

然后，您可以例如使用带有 getter/setter 的计算属性来获取和设置您的商店状态。

<template> 
  <b-collapse v-model="isNameCollapseOpen" id="searchByName">
    // stuff
  </b-collapse>
</template>

<script>
export default {
  computed: {
    isNameCollapseOpen: {
      get() {
        // Get state from store
        return this.$store.state.isNameCollapseOpen
      },
      set(isOpen) {
        // Update store using a mutation
        this.$store.commit('SET_NAME_COLLAPSE_STATE', isOpen)
      }
    }
  }
}
</script>

请注意，保存在 Vuex 中的内容不会在页面加载之间持续存在，这意味着如果您重新加载页面，默认情况下状态会丢失。但是，有一些插件可以持久存储状态，例如vuex-persist或vuex-persistedstate。

例子

const store = new Vuex.Store({
  state: {
    isNameCollapseOpen: false
  },
  mutations: {
    SET_NAME_COLLAPSE_STATE(state, isVisible) {
      state.isNameCollapseOpen = isVisible
    }
  }
})

new Vue({
  el: "#app",
  store: store,
  computed: {
    isNameCollapseOpen: {
      get() {
        // Get state from store
        return this.$store.state.isNameCollapseOpen
      },
      set(isOpen) {
        // Update store using a mutation
        this.$store.commit('SET_NAME_COLLAPSE_STATE', isOpen)
      }
    }
  }
});
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>

<div id="app">
  <b-btn v-b-toggle.search-by-name>Toggle collapse</b-btn>

  <b-collapse v-model="isNameCollapseOpen" id="search-by-name">
    Some text
  </b-collapse>
  <hr /> Store state: {{ $store.state.isNameCollapseOpen }}
</div>

推荐阅读