vuex实现跳转页面保持原来筛选条件

在使用Vuex实现页面跳转时，需要保持原来的筛选条件，可以通过以下步骤实现：

1. 在Vuex的store中定义一个全局状态对象，该对象用于存储筛选条件。
2. 在筛选条件发生变化时，将新的条件值存储到该全局状态对象中。
3. 在跳转页面前，获取全局状态对象中的筛选条件值。
4. 在目标页面中，在页面加载完成后，通过读取全局状态对象中的筛选条件值，来初始化页面的筛选条件。
5. 在页面组件中使用计算属性或getter方法，从Vuex的全局状态对象中获取筛选条件值，并应用到相应的组件方法中。

以下是一个示例代码，以帮助理解上述步骤：

1. 在Vuex的store.js文件中：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    filterConditions: {}, // 存储筛选条件的全局状态对象
  },
  mutations: {
    updateFilterConditions(state, conditions) { // 更新筛选条件的mutation
      state.filterConditions = conditions;
    },
  },
});

2. 在筛选页面组件中：

import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['updateFilterConditions']),
    applyFilterConditions() {
      // 将新的筛选条件存储到全局状态对象中
      this.updateFilterConditions({
        // 筛选条件相关属性和值
      });

      // 导航到另一个页面
      this.$router.push('/目标页面');
    },
  },
}

3. 在目标页面组件中：

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['filterConditions']),
    filteredData() {
      // 使用筛选条件来处理数据
      // 在此处应用筛选条件到数据，以获取符合条件的filteredData
    },
  },
  created() {
    // 初始化目标页面时，获取全局状态对象中的筛选条件，并使用它们来初始化页面的筛选条件
    this.initializeFilterConditions();
  },
  methods: {
    initializeFilterConditions() {
      // 读取筛选条件，根据需要初始化页面的筛选条件
      // 例如：this.filter = this.filterConditions.filter;
    },
  },
}

通过以上步骤，我们可以在使用Vuex实现页面跳转时，保持原来的筛选条件。