vue-admin HeaderSearch(表頭搜尋)元件修改

ziming007發表於2020-09-17
VueHeader元件

需求

當點選表頭的搜尋框時,搜尋訂單管理中的某條訂單,跳轉至訂單列表,並且展示對應的tab

思路

1.設定表頭搜尋元件
2.路由跳轉至訂單列表
3.通過vuex管理搜尋的值
4.訂單列表監聽該值,設定搜尋條件,呼叫後臺介面.最後展示對應tab

實現

修改搜尋元件

1.1 進入src\components\HeaderSearch找到表頭搜尋元件,可以在原有搜尋元件基礎上更改,或者新建一個搜尋元件,如果為新建,需要在layout對應的表頭模組重新引入.為了書寫方便,我在這裡直接更改
TEMPLATE:

<el-input v-model="search" placeholder="請輸入訂單號或內部單號" class="header-search-select">
  <el-button slot="append" icon="el-icon-search" @click="searchOrder" />
</el-input>

SCRIPT:

data() {
    return {
      search: '' // 搜尋資訊
    }
  },
  methods: {
    // 搜尋訂單
    searchOrder() {
      this.$store.commit('header/setSearch', this.search) // 將資料放入vuex中管理
      // 判斷當前是否在訂單管理頁面,如果不在則跳轉
      if (this.$route.name !== 'OrderManagement') {
        // 開啟訂單頁面
        this.$router.push({
          name: 'OrderManagement'
        })
      }
    }
  }

實現效果:

在這裡插入圖片描述

使用vuex監控search的值

1.2.1 在src\store\modules中新建header.js vuex檔案,監控搜尋值

// 定義需要管理的狀態
const state = {
  search: '' // 搜尋的值
}
// 操作管理狀態中的資料
const mutations = {
  setSearch(state, payload) {
    state = Object.assign(state, {
      search: payload
    })
  }
}
// 非同步操作
const actions = {}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

1.2.2 開啟src\store\getters.js 輸出header中的 state,mutations
在getters中新增:

search: state => state.header.search

注意:

1.3.1 在state賦值時,不要直接寫成 state.search = payload,因為在後面使用計算屬性computed時,不會監聽到物件引導地址未改變的值.例如 物件中key中value的變化.
1.3.2 namespaced名稱空間會對使用方法有所更改.詳情請看:扛麻袋的少年的部落格
blog.csdn.net/lzb348110175/article... 講的很詳細

3 .訂單列表監聽search的值變化,執行搜尋
3.1 引入vuex,獲取search值

import { mapState } from 'vuex'
// 計算屬性
  computed: {
    ...mapState({
      search: state => state.header.search // 執行賦值
    })
  },
  // 監聽
  watch: {
    search(newVal, oldVal) {
      if (newVal) {
        console.log(newVal)
      }
    }
  }

測試

3.2.1 輸入資料
在這裡插入圖片描述

3.2.2 使用vue谷歌外掛,監控vuex資料變化

在這裡插入圖片描述

我們可以看到vuex中的資料已經發生變化
在這裡插入圖片描述

同時,我們列印的console也能直觀的看出改變

在這裡插入圖片描述

結語

其實,剛開始我一直想直接通過檢測 route 中params的值來達到搜尋訂單的目的,但是路由的值並不能實時的監控到,還要思考如何重新掛載等等問題.最後還是嘗試使用vuex來監控搜尋的資料,雖然是第一次正經用vuex,但是還是深深的感受到了vuex的妙處.

如果覺得我上面的方法有錯誤或者需要改進的地方,請各位大佬指正 ^ - ^

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章