Vuex 的项目实例10 底部按钮高亮切换

1、把底部按钮的默认 type 加上

<!--操作按钮-->
<a-button-group>
          <a-button type="primary" >全部</a-button>
          <a-button type="default" >未完成</a-button>
          <a-button type="default" >已完成</a-button>
</a-button-group>

2、给三个按钮都添加点击事件：

<!--操作按钮-->
<a-button-group>
          <a-button type="primary" @click="changList('all')">全部</a-button>
          <a-button type="default" @click="changList('undone')">未完成</a-button>
          <a-button type="default" @click="changList('done')">已完成</a-button>
</a-button-group>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  methods: {
    changList(e) {
      console.log(e)
    }
  }
}
</script>

这时点击全部按钮，控制台打印“all”；点击未完成按钮，控制台打印“undone”；点击已经完成按钮，控制台打印“done”。

3、在 store/index.js 文件的 state 中定义 viewKey：

state: {
    viewKey: 'all' // 默认展示全部
}

4、把点击某个按钮的值赋值到 viewKey：

// 修改页面上展示的列表数据
    changList(e) {
      console.log(e)
      this.$store.commit('changeViewKey', e)
    }

5、打开 store/index.js 中添加 changeViewKey：

mutations: {
    // 修改视图的关键字
    changeViewKey(state, key) {
      state.viewKey = key
    }
  }

6、把全局的 viewKey 值映射为组件的计算属性：

// 计算属性
  computed: {
    ...mapState(['list', 'inputValue', 'viewKey']),
  },

7、根据 viewKey 的值，按需为底部按钮设置 type 值：

<!--操作按钮-->
<a-button-group>
   <a-button :type="viewKey === 'all' ?'primary' : 'default'" @click="changList('all')">全部</a-button>
   <a-button :type="viewKey === 'undone' ?'primary' : 'default'" @click="changList('undone')">未完成</a-button>
   <a-button :type="viewKey === 'done' ?'primary' : 'default'" @click="changList('done')">已完成</a-button>
</a-button-group>

ok，此时就实现了点击按钮实现高亮的效果。