含vuex时的模糊查询

最近写了个项目，需要从后端获取到数据信息，再对信息进行分页。由于信息太多，首页需要用到模糊查询，要对整个列表进行搜索，并不只是分完页的某个页面。

但由于vuex中的state不能随意更改，试了好几次都走不通，也看了好多文章，写的与我想要的不太相同，下面是我总结下来的现在使用的：

vuex的js中

// 状态
const state = {
    // 初始值
    allList: [], // 存放所有信息
    search: [], // 搜索后的数组
    list: [], // 获取分页的列表信息
    page: 1, // 页码
    total: 0, // 总数
    limit: 10, // 限制每页条数
}
// 修改状态
const mutations = {
    getAllList(state, arr) {
        state.allList = arr
    },
    ... ,
    changeSearch(state, key) { // 将对比后的数组列表存放在search中
        if(key){ // 如果有关键字，则做以下操作
            state.search = [];
            state.allList.forEach(v => { 
                if (v.name.includes(key)) { // 包含关键字（模糊查询）
                    state.search.push(v)
                }
            })
            state.list = state.search.slice(0, 10); // 将第一页展示10条信息
            state.total = state.search.length; // 做分页的总条数
        }else{ // 否则将search清空
            state.search = [];
        }
    },
}

const actions = {
    reqAll() { ... }, // 获取所有列表

    reqList({ commit, dispatch, state: { page, search } }) {
        // 当搜索出的数组为空时，按照之前的请求方式去请求列表
        if (search.length == 0) {
            // 发请求
            ...
        } 
        else { // 将拿到的数组进行分页处理
            page--;
            let a = search.slice(page * 10, (page * 10) + 10);
            commit('changeList', a)
        }
    },

    reqTotal() {...}, // 请求总数
    changePage() {...}, // 操作页码

    // 搜索框
    changeSearch({ commit, dispatch }, key) {
        if (key) { // 关键字存在时做以下操作
            commit('changeSearch', key)
        } else { // 不存在时（由于action不能直接操作state的值）
            commit('changeSearch', key)
            // 重新请求列表及总数
            dispatch('reqList') 
            dispatch('reqTotal')
        }
    }
}

const getters = {...} // 需要导出的数据

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
})

index.vue

html

</template>  
     <el-input type="text" placeholder="请输入员工姓名" v-model="keywords" clearable />
</template>

js

<script>
import { mapActions, mapGetters } from "vuex";
import { reqTmp, reqUserExcelOutput } from "@/request/api";

export default {
  data() {
    return {
      keywords: "",
    };
  },
  computed: {
    ...mapGetters({ search: "person_msg/search" })
   },
  methods: {
    ...mapActions({ changeSearch: "changeSearch" }),
   }
   // 监听输入框
   watch: {
     keywords: function(v) {
       this.changeSearch(v);
     }
   }
};
</script>

至此就结束啦，希望可以帮到你~😄😄