vben admin框架通过pinia实现记住页面筛选项的功能的代码

vben admin框架结合了Vue.js和Vite构建工具，通常会利用Vuex或类似的状态管理库Pinia来处理状态管理，包括记住用户的页面筛选项。Pinia是Vue 3官方推荐的状态管理模式，它简化了状态管理和组件之间的解耦。

假设你有一个名为`filterStore`的Pinia store，用于存储筛选条件，你可以创建一个`useFilterState`或`getFilteredItems`这样的函数来获取并管理筛选项。当用户改变筛选条件后，你可以使用Vue的`watch`或者`reactive`特性来监听变化，并在localStorage中保存这些更改。

下面是一个简化的例子：

import { createStore } from 'pinia';
import { reactive } from 'vue';

// 创建store
const filterStore = createStore({
  id: 'filter',
  state: () => ({
    filters: reactive({}) // 初始化为空的对象
  }),
  mutations: {
    setFilters(state, filters) {
      localStorage.setItem('filter', JSON.stringify(filters));
      state.filters = filters;
    },
    getFiltersFromLocalStorage() {
      const storedFilters = localStorage.getItem('filter');
      if (storedFilters) {
        return JSON.parse(storedFilters);
      }
      return {}; // 如果没有存储，返回默认值
    }
  },
  actions: {
    updateFilters(newFilters) {
      this.setFilters(newFilters);
    },
    restoreInitialFilters() {
      this.setFilters(this.getFiltersFromLocalStorage());
    }
  }
});

// 使用store
export function useFilterState() {
  const filters = filterStore.readonly(filters);

  onMounted(() => {
    filterStore.restoreInitialFilters();
  });

  watch(() => filters, newFilters => {
    localStorage.setItem('filter', JSON.stringify(newFilters));
  });

  return filters;
}

在这个例子中，`updateFilters`方法更新筛选项并持久化，而`restoreInitialFilters`则从localStorage恢复初始设置。当你需要更新筛选条件时，可以调用`useFilterState().filters`并传递新的过滤器对象。