Vuex——计划表TODOS

一、演示效果

TODOS

二、代码

1、使用vue-cli脚手架建立一个项目

2、终端安装vuex, axios, ant-design-vue

npm install vuex@3.6.2 -S

npm i axios

npm install --save ant-design-vue@1.7.8

3、代码目录

4、代码

list.json

[{
    "id": 0,
    "info": "Racing car sprays burning fuel into crowd.",
    "done": true
}, {
    "id": 1,
    "info": "Japanese princess to wed commoner.",
    "done": false
}, {
    "id": 2,
    "info": "Australian walks 100 km after outback crash.",
    "done": false
}, {
    "id": 3,
    "info": "Man charged over missing wedding girl.",
    "done": true
}, {
    "id": 4,
    "info": "Los Angeles battles huge wildfires.",
    "done": false
}]

main.js

import Vue from 'vue'
import App from './App.vue'

//1、导入ant-design-vue 组件库
import Antd from 'ant-design-vue'

//2、导入组件库的样式表
import 'ant-design-vue/dist/antd.css'

import store from './store.js'

Vue.config.productionTip = false
    //3、安装组件库
Vue.use(Antd)

new Vue({
    render: h => h(App),
    store,
}).$mount('#app')

store.js

import Vue from 'vue'
// 2.导入vuex
import Vuex from 'vuex'

import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
    // state中存放的就是全局共享的数据
    state: {
        // 所有列表的数据
        list: [],
        // 文本框的值
        inputValue: "",
        nextId: 5,
        viewsKey: 'all',
    },
    mutations: {
        initList(state, list) {
            state.list = list
        },

        // 输入框赋值
        inputValue(state, value) {
            state.inputValue = value
        },

        // 添加事项
        addItem(state) {
            var obj = {
                    id: state.nextId,
                    info: state.inputValue.trim(),
                    done: false
                }
                // 添加到列表中
            state.list.push(obj)
                // 下一个 nextId自加
            state.nextId++
                // 输入框清空
                state.inputValue = ''
        },

        // 根据Id删除事项
        removeItem(state, id) {
            // 查找id是否在list列表中存在
            var i = state.list.findIndex(x => x.id === id)
                // 如果不等于-1 ，说明找到，进行删除
            if (i !== -1) {
                state.list.splice(i, 1)
            }
        },

        // 更改复选框状态
        checkboxState(state, id) {
            var i = state.list.findIndex(x => x.id === id)
            if (i !== -1) {
                state.list[i].done = !state.list[i].done
            }
        },

        // 清除已完成
        clearItem(state) {
            // 把未完成的列表数据筛选出来，重新赋值给state中的list
            state.list = state.list.filter(x => x.done == false)
        },

        // 按钮高光切换
        viewsChang(state, key) {
            state.viewsKey = key
        }

    },
    actions: {
        getList(context) {
            axios.get('/list.json').then(({ data }) => {
                // console.log(data)
                // 触mutation中的方法，并把data值传过去
                context.commit('initList', data)
            })
        }
    },

    getters: {
        // 更新未完成事项的数目
        updateItemNum(state) {
            // 先把复选框状态为 false的数据给筛选出来，返回的是一个数组，在return 返回数组长度
            return state.list.filter(x => x.done == false).length
        },

        // 全部，未完成，已完成的列表数据切换
        infoList(state) {
            if (state.viewsKey == 'all') {
                return state.list
            }

            if (state.viewsKey == 'undone') {
                return state.list.filter(x => x.done == false)
            }

            if (state.viewsKey == 'done') {
                return state.list.filter(x => x.done == true)
            }

            return state.list
        }
    }
})

App.vue

<template>
  <div id="app">
    <h1>TODOS</h1>
    <a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handle"/>
    <a-button type="primary" @click="addItemDoList">添加事项</a-button>

    <a-list bordered :dataSource="infoList" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <a-checkbox :checked="item.done" @click="handleCheckbox(item.id)">{{ item.info }}</a-checkbox>
        <!-- 删除链接 -->
        <a slot="actions" @click="removeItemDoList(item.id)">删除</a>
      </a-list-item>

      <!-- footer区域 -->
      <div class="footer" slot="footer">
        <span>{{updateItemNum}}条剩余</span>
        <a-button-group>
          <a-button :type="viewsKey=='all' ? 'primary' : 'default' " @click="btnChange('all')">全部</a-button>
          <a-button :type="viewsKey=='undone' ? 'primary' : 'default' " @click="btnChange('undone')">未完成</a-button>
          <a-button :type="viewsKey=='done' ? 'primary' : 'default' " @click="btnChange('done')">已完成</a-button>
        </a-button-group>
        <a @click="clearItemDoList">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>
<script>
import {mapState,mapGetters} from 'vuex'

export default {
  name: "app",
  data() {
    return {};
  },

  created(){
    this.$store.dispatch('getList')
  },

  // 计算属性
  computed:{
    ...mapState(['inputValue','viewsKey']),
    ...mapGetters(['updateItemNum','infoList'])
  },

  methods:{

    handle(e){
      // console.log(e.target.value)
      // 触发 store.js 中的 mutations中的inputValue方法
      this.$store.commit('inputValue',e.target.value)
    },

    // 添加事项
    addItemDoList(){
      if(this.inputValue.trim().length<=0) 
      // ant-design-vue 组件库中绑定this.$message.warning()
      return this.$message.warning('文本框的内容不能为空')

      // 触发 store.js 中的 mutation中的 addItem方法
      this.$store.commit('addItem')
    },

    // 删除实现
    removeItemDoList(id){
      // console.log(id)
      this.$store.commit('removeItem',id)
    },

    // 更改复选框状态
    handleCheckbox(id){
      this.$store.commit('checkboxState',id)
    },

    // 清除已完成事件
    clearItemDoList(){
      this.$store.commit('clearItem')
    },

    // 按钮高光切换
    btnChange(key){
      // console.log(key)
      this.$store.commit('viewsChang',key)
    }
  }
};
</script>



<style scoped lang='less'>

#app {
  padding: 10px;

  h1 {
    margin-left: 200px;
  }
}
.my_ipt {
  width: 500px;
  margin-right: 10px;
}
.dt_list {
  width: 500px;
  margin-top: 10px;
}
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>