Todo-Vuex项目总结和笔记

列表数据的动态加载

首先导入store,将他挂载到和render平级的节点,把要动态加载的数据存到json文件中

通过axios来把json中的数据导出成真实数据

actions: {
   getList(context){
     axios.get('/list.json').then(({data}) =>{
       console.log(data)
       context.commit('initList',data)
     })
   }
 },
 
 //1.  `getList(context)`: 这是一个 action 函数，接受一个上下文对象 `context` 作为参数。上下文对象包含了一些有用的属性和方法，例如 `commit` 用于提交 mutation。
2.  `axios.get('/list.json')`: 这是一个使用 axios 库发送 GET 请求的语句，请求的目标是 `/list.json`。axios 是一个常用的 HTTP 请求库，用于与服务器进行数据交互。
3.  `.then(({data}) => { ... })`: 这是一个 Promise 的链式调用，当请求成功后会执行后续的回调函数。回调函数接收一个包含响应数据的对象作为参数，并使用对象解构语法将其中的 `data` 属性提取出来。
4.  `console.log(data)`: 这是一个用于在控制台输出数据的语句，将获取到的数据打印出来，方便调试和查看。
5.  `context.commit('initList', data)`: 这是一个调用上下文对象的 `commit` 方法，用于提交一个名为 `initList` 的 mutation，并将获取到的数据 `data` 作为参数传递给 mutation。

总结起来，这段代码的作用是发送一个 GET 请求获取数据列表，然后将获取到的数据通过 mutation 进行初始化。

axios.get请求获取list.json中的数据,解构赋值并打印

App.vue中

created(){
    this.$store.dispatch("getList")
  }

把getList函数映射到App.vue中使用

因为动态获取到的数据存到state中,但是action不能修改state,它只能通过mutation来修改state, 所以mutation里面写一个赋值函数

initList(state,list){
  state.list = list
},

导入mapState函数,把state里面存储的list数据通过mapState函数映射到App.vue中使用,成为计算属性

文本框内容的绑定

首先定义一个inputValue变量用于存储文本框的内容,依然放到state里

通过mapState,将state中的inputValue映射为App.vue中的计算属性

找到文本框标签的内容,把inputVlaue动态绑定上

<a-input placeholder="请输入任务" class="my_ipt" :value="inputValue" @change="handleInputChange"/>

:value为单向数据绑定, @change与v-model(双向数据绑定)和:value(单项数据绑定)组合使用, 双向绑定： 通常，你会将 @change 事件与 v-model 一起使用。v-model 是 Vue.js 提供的一种指令，用于实现表单元素和数据之间的双向绑定。当用户输入内容时，v-model 会自动更新数据，而当数据发生变化时，输入框的值也会随之更新。 事件触发时机： @change 事件会在通常是用户输入后按下回车键或点击其他地方 时触发。这与 @input 事件不同，后者会在每次输入时都触发。

新增methods结点里面写handleInputChange函数的具体实现

  methods:{
    //监听文本框内容变化
    handleInputChange(e){
      console.log(e.target.value)
      //通过methods里面的事件监听函数拿到文本框最新的数据
      //对应setInputValue(state,val) 调用mutation传递最新的参数
      this.$store.commit('setInputValue',e.target.value)
    }
  }

文本框总结: 首先将state里面的inputValue数据通过mapValue(App.vue中导入使用)映射为计算属性,绑定到文本框中(:value),然后通过绑定@change="handleInput"反向将文本框里的内容变化保存到state中去

点击添加事项的操作

首先为button按钮绑定了一个单击事件处理函数@click="addItemToList",点击触发对应事件

<a-button type="primary" @click = "addItemToList">添加事项</a-button>

在处理函数中先判断计算属性用户输入的文本是否为空,为空弹出一个提示

不为空就调用mutation里面的方法改变state里面的list数组

addItemToList(){
  if(this.inputValue.trim().length <= 0){
    //如果要添加的数据去掉空格后长度小于等于0，即添加了空值，提示不为空
    return this.$message.warning('文本框内容不能为空！')
  }
//不为空就想办法提交mutation的某个函数修改state里面的list数组
this.$store.commit('addItem')
}

然后在mutation里面写一个改变数组的方法,首先方法里定义一个要添加的数据对象,

  const obj ={
    //正常情况下，id是后台数据库自动生成的，
    //没有id需要自己模拟
    id : state.nextId,
    info: state.inputValue.trim(),
    done: false
  }
  

点击完之后,任务项添加进去,下一次要添加的数据为新,id和info都要改变,id在state里面初始化一个nextId(保证是没有被占用的id),自增改变,通过把inputValue清空来清空当前文本框内容

  state.list.push(obj)
  state.nextId++
  //将已经输入好的事项清空，方便下一次添加
  state.inputValue = ''
  

删除对应事项的功能

类似于添加任务事项,先在methods里定义一个删除任务事项的方法,参数为id,然后通过提交mutation改变state里的list,mutation定义要提交的方法,根据传入的id找索引来删除,找和删的方法分别是findIndex和splice

templete:
        <a slot="actions" @click="removeItemById(item.id)">删除</a>

methods:
            //删除列表项需要对应的id
    removeItemById(id){
      console.log(id)
      //模仿增加提交对应的mutation中函数
      this.$store.commit('removeItem',id)
    }

mutation:
    removeItem(state,id){
      //根据id找对应索引值，如果索引值不为-1则删除元素
      const i = state.list.findIndex(x => x.id === id)
      if(i !== -1){
        state.list.splice(i,1)
      }
    }

复选框状态的的绑定

为动态渲染的list标签动态绑定属性:checked,(注意还没绑定点击事件,只是让选中的状态显示到界面上了)

    <a-checkbox :checked="item.done">{{ item.info }}</a-checkbox>
    

点击复选框拿到复选框的最新状态

    templete:
    <!-- 只要状态发生变化，就会自动触发change函数 -->
    <a-checkbox :checked="item.done" @change="(e) => {cbStatusChanged(e)}">{{ item.info }}</a-checkbox>
    methods:
        cbStatusChanged(e){
  //通过e.target.checked可以接收到最新选中状态
  console.log(e.target.checked)
}

点击复选框改变复选框的最新状态

拿到e和id,依旧是之前的步骤,提交mutation函数 mutation函数,先找到索引的id,找到之后state.list[i].done = param.status;把获取的最新状态赋值给state里面数据,完成更新

app.vue

templete:

    <a-checkbox :checked="item.done" @change="(e) => {cbStatusChanged(e,item.id)}">{{ item.info }}</a-checkbox>
    

methods:

 //事件e全称是$event，不传参数的花可以不写，不用箭头函数并且要传参的话，必须写全
//监听复选框选中状态变化的事件
cbStatusChanged(e,id){
  //通过e.target.checked可以接收到最新选中状态
  console.log(e.target.checked)
  //获取了状态但不知道具体是哪个
  console.log(id)
  //根据获取的这俩参数写mutation方法
  const param = {
    id: id,
    status: e.target.checked
  }
  this.$store.commit('changeStatus',param)
}

store/index.js

mutations:

   changeStatus(state,param){
  //1.查找索引
  //2.根据索引找到对象
  const i = state.list.findIndex(x => x.id === param.id)
  if(i !== -1){
    //找到了
    state.list[i].done = param.status;
  }
}

统计未完成的任务条数

使用getters

store/index.js

  getters:{
    //未完成的任务条数
    unDoneLength: state => {
      return state.list.filter(x => x.done === false).length;
    }
  }

App.vue

<span>{{ unDoneLength }} 条剩余</span>

import {  mapState,mapGetters } from "vuex"

 computed:{
    //将store里的list映射过来
    ...mapState(['list','inputValue']),
    ...mapGetters(['unDoneLength'])
  },

清除已完成的任务

点击"清除已完成按钮",会删除done为true即已完成的任务 依旧先在App.vue里写函数并绑定到标签上click触发,然后在函数里写mutation函数

store/index.js

cleanDone(state){
  state.list = state.list.filter(x => x.done === false)
}

App.vue

   <a @click= "clean">清除已完成</a>
   
    clean(){
      this.$store.commit('cleanDone')
    }
    

列表底部三个按钮点击高亮切换

有三个按钮选项,高亮是通过type="primary"属性来完成的,未被高亮(默认)是通过type="default"来完成的.为这三个按钮都绑定一个单击事件处理函数changelist,然后再不同按钮上同一个函数传入按钮对应的字符串参数,在state里面存一个变量viewKey用来存储当前选中的key,然后把viewkey映射过来计算属性进行动态计算

store/index.js

state: {
    // 所有的任务列表
    list:[],
    //文本框的内容
    inputValue:'aaa',
    //下一个id
    nextId:5,
    viewKey:'all'
  },
 changeViewKey(state,key){
      state.viewKey = key
    }

App.vue

     <!-- 重点三元运算符，viewKey是否等于all，等于高亮，不等于就不亮 -->
      <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>
      
          //修改页面上展示的列表数据
changeList(key){
//通过修改key值来切换
  console.log('key')
  this.$store.commit('changeViewKey',key)
}

列表数据的按需切换

因为不改变list本数据,只是根据切换来显示list的包装过的内容,所以在getter里写

store/index.js

getters:{
//...
    infolist(state){
      if(state.viewKey === 'all'){
        return state.list
      }
      if (state.viewKey === 'undone') {
        return state.list.filter(x =>x.done === false)
      }
      if (state.viewKey === 'done') {
        return state.list.filter(x =>x.done === true)
      }
    }

App.vue

<!-- 把list渲染到界面上 -->
   <a-list bordered :dataSource="infolist" class="dt_list">
   
 computed:{
   //将store里的list映射过来
   ...mapState(['list','inputValue','viewKey']),
   ...mapGetters(['unDoneLength','infolist'])
 },