接续昨天未完成的部分...

将药局资料套用至左侧列表

下一步就是要来处理药局资料，在asideMenu.vue的computed取state(记得加入import {mapState} from "vuex")

computed: {
  currCity: {...},
  currDistrict: {...},
	...mapState(["stores"]),
  ...mapGetters(["cityList", "districtList"]),
},

用v-for改写模板中的药局列表区

<ul class="store-lists">
  <li class="store-info wraps" v-for="s in stores" :key="s.id">
    <h1>{{ s.name }}</h1>

    <div class="mask-info">
      <i class="fas fa-head-side-mask"></i>
      <span>大人口罩: {{ s.mask_adult }} 个</span>
    </div>

    <div class="mask-info">
      <i class="fas fa-baby"></i>
      <span>儿童口罩: {{ s.mask_child }} 个</span>
    </div>

    <div class="mask-info">最後更新时间:{{ s.updated }}</div>

    <button class="btn-store-detail">
      <i class="fas fa-info-circle"></i>
      看详细资讯
    </button>
  </li>
</ul>

到此步骤大致有了个模样，但药局的部分并没有被过滤而是一次列出所有的资料，所以要回到store/index.js增加一个getters处理资料

filteredStores(state) {
  //依县市和行政区分组
  const { stores } = state
  return stores.filter((d) => d.county === state.currCity && d.town === state.currDistrict)
}

回到asideMenu.vue修改computed和模板

computed: {
  currCity: {...},
  currDistrict: {...},
	//删除...mapState(["stores"]),
	//新增filteredStores
  ...mapGetters(["cityList", "districtList","filteredStores"]),
},

<ul class="store-lists">
  <li class="store-info wraps" v-for="s in filteredStores" :key="s.id">
  </li>
</ul>

这样药局就会跟着所选的区域更动了!!

药局列表与关键字搜寻连动

左侧选单就剩下最後一块关键字搜寻，

首先，在store/index.js中的state加上一个新的属性

state: {
  currCity: '台北市',
  currDistrict: '北投区',
  location: [],
  stores: [],
  keywords:''
},

以及对应的mutations

setKeywords(state, payload) {
  state.keywords = payload
}

在asideMenu.vue新增对应的computed属性

keywords: {
  get() {
    return this.$store.state.keywords;
  },
  set(value) {
    this.$store.commit("setKeywords", value);
  },
},

到getters改写filteredStores，有关键字的情况下无视县市区的分组条件

filteredStores(state) {
  //依县市和行政区分组
  const { stores } = state
  //加入关键字判断
  return state.keywords
    ? stores.filter((d) => d.name.includes(state.keywords))
    : stores.filter((d) => d.county === state.currCity && d.town === state.currDistrict)
}

最後，让关键字有hightlight的效果以增加使用者的体验

在asideMenu.vue新增methods属性

methods: {
  keywordsHighlight(val) {
    return val.replace(
      new RegExp(this.keywords, "g"),
      `<span class="highlight">${this.keywords}</span>`
    );
  },
},

并将模板中的h1做改写

<h1 v-html="keywordsHighlight(s.name)"></h1>

加上颜色的style

.highlight {
  color: #f09d49;
}

侧选单的部分就完成拉!!!