1.创建个vuex项目

1.1在终端输入vue ui
1.2.在浏览器打开ui页面，点击Vue项目管理处
创建步骤和要求跟创建vue项目大致一样


点击1处，找文件位置
确定要将项目建在哪个文件，然后就进行第三步

这里就只填写项目名就可以了，其他就默认，填完项目名就直接下一步了

选择手动

选择完就下一步

**

2.项目实施

**
2.1删掉不必要的代码（app.vue里面的一些代码，删掉view文件夹，删掉components文件夹下的vue文件，还有router/index.js里面的一些代码）
2.2安装
2.2.1
Ant Design
在终端安装：
网址：https://www.antdv.com/docs/vue/introduce-cn
在终端输入
npm install ant-design-vue --save
在浏览器上安装：


点击右侧的图标


2.2.2
axios
在终端安装
npm install axios
在浏览器安装
跟上面安装ant-design一样在插件那安装
2.3项目准备（为了代码格式而准备，不是必需的）
2.3.1在项目根目录下添加**.prettierrc**文件，内容：

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 200
}

2.3.2在标记1处的文件内添加标记2处的代码，不要忘记了标记3处的逗号，否则会报错

2.3.3
禁用这个插件，（禁用之后最好重启一下vscode）

然后安装这个这插件

然后右键选择

2.4项目代码
public/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 100km after outback crash.",
    "done": true
  },
  { "id": 3, "info": "Man charged over missing wedding girl.", "done": false },
  { "id": 4, "info": "Los Angeles battles huge wildfires.", "done": false }
]

src/app.vue

<template>
  <div id="app">
    <a-input
      placeholder="请输入任务"
      class="my_ipt"
      :value="inputV"
      @change="handle"
    />
    <a-button type="primary" @click="addItem">添加事项</a-button>
    <!-- :dataSource="infoList"列表中的数据来源 -->
    <!-- 若是没有任务栏切换的功能，:dataSource中的值为list -->
    <a-list bordered :dataSource="infoList" class="dt_list">
      <a-list-item slot="renderItem" slot-scope="item">
        <!-- 复选框 -->
        <!-- 复选框的状态是元素对象的done值 -->
        <!-- 任务内容是元素对象的info -->
        <a-checkbox :checked="item.done" @change="changed(item.id, $event)">{{
          item.info
        }}</a-checkbox>
        <!-- 删除链接 -->
        <a slot="actions" @click="delItem(item.id)">删除</a>
      </a-list-item>
      <!-- footer区域 -->
      <div slot="footer" class="footer">
        <!-- 未完成的任务个数 -->
        <span>{{ getUndone }}条剩余</span>
        <!-- 操作按钮 -->
        <a-button-group>
          <!-- 用三目运算来确定按钮被选中的样式(type) -->
          <!-- 判断viewKey是否等于all，结果为true的话，type=primary,否则type=default-->
          <!-- 用点击事件(changeList())的参数是当前按钮的viewKey -->
          <a-button
            :type="viewKey === 'all' ? 'primary' : 'default'"
            @click="changeList('all')"
            >全部</a-button
          >
          <a-button
            :type="viewKey === 'undone' ? 'primary' : 'default'"
            @click="changeList('undone')"
            >未完成</a-button
          >
          <a-button
            :type="viewKey === 'done' ? 'primary' : 'default'"
            @click="changeList('done')"
            >已完成</a-button
          >
        </a-button-group>
        <!-- 把已经完成的任务清空 -->
        <a @click="clean">清除已完成</a>
      </div>
    </a-list>
  </div>
</template>

<script>
// 按需导入相关的函数，然后再将数据映射为计算属性

import { mapState, mapGetters } from 'vuex'
export default {
  name: 'app',
  data () {
    return {}
  },
  // 在创建后自动执行actions中的getList方法，获取任务列表数据
  created () {
    this.$store.dispatch('getList')
  },
  methods: {
    // 在文本框中输入新的任务内容，将其添加到列表里面
    addItem () {
      // 判断文本框内的内容去掉两端的空格之后的长度是否小于等于0
      // 若长度小于等于0，则添加不了。并出现提示信息
      if (this.inputV.trim().length <= 0) {
        // $message是自带的
        return this.$message.warning('文本框内容不能为空')
      } else {
        // 若长度大于0，则使用commit函数调用mutations中的addItems方法来添加任务
        this.$store.commit('addItems')
      }
    },
    // 当文本框内容发生改变时，会将新的文本框的内容传到store那边
    handle (e) {
      // 使用commit函数调用mutations中的changeInputV方法来传递文本框的内容
      // e是事件
      this.$store.commit('changeInputV', e.target.value)
    },
    // 删除选中的任务
    delItem (id) {
      // 使用commit函数调用mutations中的delItems,传要删除的任务的id值，
      this.$store.commit('delItems', id)
    },
    // 改变复选框的选中状态
    // 当复选框的状态发生改变时，会触发这个函数
    changed (id, e) {
      // 创建一个对象模板，存储复选框的id和选中状态
      const param = {
        id: id,
        status: e.target.checked
      }
      // 使用commit函数调用mutations中的changeStatus方法，将param传去store
      this.$store.commit('changeStatus', param)
    },
    // 清除已完成的任务
    clean () {
      // 使用commit函数调用mutations中的cleanDone方法
      this.$store.commit('cleanDone')
    },
    // 任务栏切换,盒子里的任务列表也会跟着改变
    changeList (key) {
      // 使用commit函数调用mutations中的changeListItem，传一个参数key
      // key为:all/undone/done
      this.$store.commit('changeListItem', key)
    }
  },
  // 若是没映射的使用：
  // 在方法中使用：this.$store.state.数据名
  // 在模板中使用：{{ $store.state.数据名 }}
  // 映射为计算属性，计算属性在模板中可当变量使用
  computed: {
    // store中state内的数据，映射之后可直接当变量使用
    ...mapState(['inputV', 'list', 'viewKey']),
    // store中的getters
    ...mapGetters(['getUndone', 'infoList'])
  }
}
</script>

<style>
#app {
  padding: 10px;
}

#app .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>

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 导入
import './plugins/ant-design-vue.js'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.config.productionTip = false

Vue.use(Antd)

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

src/stotre/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)

export default new Vuex.Store({
  // 空享的数据（存储的状态）
  state: {
    // 初始化的任务列表
    list: [],
    // 文本框的内容
    inputV: '',
    // id（原始的任务是五个，最后的id为4，所以这里是5）
    nextId: 5,
    // 任务栏是默认显示all栏（显示全部任务）
    // viewKey是页面任务栏确认选中样式的标识符
    viewKey: 'all'
  },
  // 对state中的数据进行处理
  // 以下箭头函数内的item代表的是list中的任务
  mutations: {
    // 初始化任务列表数据
    // list是actions中getList()传过来的参数data
    initList (state, list) {
      // 将list的值赋给state中的list
      state.list = list
    },
    // 当文本框内容发生改变时，触发页面中的handle事件，然后handle触发此changeInputV()函数,里面的参数value就是页面传过来的e.target.value
    changeInputV (state, value) {
      // 将传过来的value值赋给state中的inputV
      state.inputV = value
    },
    // 添加新的任务
    addItems (state) {
      // 创建一个对象（任务）模板
      const obj = {
        id: state.nextId,
        info: state.inputV,
        // done默认是false，也就是新添加的任务默认是未完成的
        done: false
      }
      // 向list数组的末尾添加新的数据（任务）
      state.list.push(obj)
      // id自动+1
      state.nextId++
      // 添加新的任务之后，将文本框中的内容清空
      state.inputV = ''
    },
    // 删除选中的任务
    // 页面的delItem()传了一个参数（id:当前选中的任务的id）
    delItems (state, id) {
      // 通过findIndex()，根据传过来的id值，找出选中的任务在list中第一次出现的位置(index)
      const index = state.list.findIndex(item => item.id === id)
      // 判断index是否等于-1，等于-1则表示当前的选中的任务不在list
      if (index !== -1) {
        // 进到这里面就说明选中的任务在list的第index个位置，
        // splice(x,y,z):x是从x处开始，删除y个元素,然后添加一个z元素来代替被删除的元素（是删除了y个元素之后，再添加一个z元素，而不是删除y个元素，再添加y个z元素）
        // splice(x,y):x是从x处开始，删除y个元素
        // 从index个元素开始，删除一个元素，就是从list删除掉选中的那一个任务
        state.list.splice(index, 1)
      }
    },
    // 改变复选框的状态
    // param是页面传过来的参数（包含任务的id和复选框的状态）
    changeStatus (state, param) {
      // index为通过findIndex()找出与复选框对应 的任务在list里面第一次出现的位置
      const index = state.list.findIndex(item => item.id === param.id)
      // 若这个在list是存在的，则将这个任务的done值为param里面的的status的值
      if (index !== -1) {
        state.list[index].done = param.status
      }
    },
    // 清除已经完成的任务
    cleanDone (state) {
      // 通过filter()过滤掉list中的任务的done属性值为true的任务，返回done值为false的任务，将结果重新赋给list
      // 此时list里面就只剩done值为false的任务（未完成）
      state.list = state.list.filter(item => item.done === false)
    },
    // 任务栏切换
    // 页面通过changeList函数传来一个参数（key）
    changeListItem (state, key) {
      // 将传过来key赋值给state中的viewKey
      state.viewKey = key
    }
  },
  // 执行异步操作
  actions: {
    // 异步获取任务列表数据
    // context是上下文
    getList (context) {
      // 通过axios的get()方法获取在public文件夹下的list.json中的数据data
      axios.get('./list.json').then(({ data }) => {
        // 调用mutations中的initList，传一个参数data（从list.json中获取的数据）
        context.commit('initList', data)
      })
    }
  },
  // 对state中 的数据进行加工处理，它是重新包装state中的数据，不会修改变更其中的数据
  getters: {
    // 计算剩余的未完成的任务
    // getUndone()返回的是未完成任务的个数
    getUndone (state) {
      // temp为state.list中的中任务的done属性值为false的任务形成的一个数组，
      const temp = state.list.filter(item => item.done === false)
      // 返回的temp数组内的元素的个数
      return temp.length
    },
    // 任务栏切换后的相应的信息列表
    // infoList()返回的是根据选中的按钮的viewKey来判断选择显示的新的任务列表
    // infoList也算是list另一种版本
    infoList (state) {
      // 判断state.viewKey是否为all，则显示显示全部的任务
      if (state.viewKey === 'all') {
        return state.list
        // 判断state.viewKey是否为undone，则显示未完成的任务列表
      } else if (state.viewKey === 'undone') {
        return state.list.filter(item => {
          return item.done === false
        })
        // 若前面两个都不是，那么state.viewKey就是done，则显示已经完成的任务列表
      } else {
        // 返回list中任务的done值为true的任务
        // filter(),用指定的函数测试数组中的所有元素，返回的是结果为ture的元素，为false的元素会被跳过，不会改变原数组
        return state.list.filter(item => {
          return item.done === true
        })
      }
    }
  },
  modules: {}
})