用vue做一个todolist

安装依赖环境

用vue脚手架搭建项目结构
vue init webpack
安装vuex
npm install --save vuex

确定功能

todoList具有增加/删除/修改/完成功能

store

首先新建一个存储变量的文件,初始结构如下

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

export default new Vuex.Store({
  
})
复制代码

创建一些初始数据

state: {
    todos: [
      { id: 0, text: '完成xxx项目xxx绩页面', done: true, show:false},
      { id: 1, text: '完成xxx项目xxx绩页面1', done: false, show:false },
      { id: 2, text: '完成xxx项目xxx绩页面2', done: true, show:false },
      { id: 3, text: '完成xxx项目xxx绩页面3', done: true , show:false},
      { id: 4, text: '完成xxx项目xxx绩页面4', done: true , show:false},
      { id: 5, text: '完成xxx项目xxx绩页面5', done: false, show:false },
      { id: 6, text: '完成xxx项目xxx绩页面6', done: true , show:false},
      { id: 7, text: '完成xxx项目xxx绩页面7', done: false, show:false }
    ]
  },
复制代码

done为是否完成的状态,show为是否显示修改的状态,后期再说.
如何获取初始变量:

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doingTodos: state => {
      return state.todos.filter(todo => !todo.done)
    }
  },
复制代码

通过筛选,分别获取正在进行中的任务和已完成的任务
如何使用这些状态:
在使用的vue文件中先引入

 import store from './store'
复制代码

全局引入好像没用?待解决

computed:{
    doneList(){
      return store.getters.doneTodos;
    },
    doingList(){
      return store.getters.doingTodos;
    }
  },
复制代码

<ul class="done-ul">
        <li v-for="done in doneList" :key="done.id">
          <div class="show-list">{{done.text}}</div>
        </li>
      </ul>
复制代码

这样就可以把待解决列表和已解决列表显示出来
接下来看增加
增加就是在数组中pull一个新对象
mutations是更改store中的状态的方法,通过commit提交实现更改,只能同步操作 store.js

mutations: {
    addList: (state, addText) => {
      state.todos.push({
        id:state.todos[state.todos.length-1].id+1,
        text:addText,
        done:false,
        show:false
      })
    }
  }
复制代码

app.vue

methods:{
    addList(){
      if(this.$refs.addText.value != ''){
        store.commit('addList',this.$refs.addText.value);
        this.addBoxShow = false;
        this.doneNum = store.getters.doneTodos.length;
        this.doingNum = store.getters.doingTodos.length;
      }
    }
  }
复制代码

<button class="add-list" v-if="!addBoxShow" @click="addBoxShow = true">增加待做事项 <span>+</span></button>
      <div class="add-list-box" v-if="addBoxShow">
        <textarea name="text" placeholder="在这里输入待做事项..." ref="addText"></textarea>
        <p><button @click="addList">修改</button></p>
      </div>
复制代码

由于我还有个统计列表个数的值,增删和初始化渲染的时候都需要重新计算值
获取input和textarea的值可以用this.$refs.addText.value来获取

修改/完成 store.js

modifyList: (state, modifyStatus) => {
      var index = state.todos.map(function (item) { return item.id; }).indexOf(modifyStatus.id);
      state.todos.splice(index,1,{
        id:modifyStatus.id,
        text:modifyStatus.text,
        done:modifyStatus.status,
        show:false
      })
    }
复制代码

由于修改就是修改text,而完成就是修改done,所以放在一起处理了

<ul class="doing-ul">
        <li v-for="(done,index) in doingList" :key="done.id">
          <div class="show-list" v-if="!done.show">
            {{done.text}}
            <button @click="modifyBoxShow(index)">修改</button>
            <button @click="finishList(index)">完成</button>
            <button @click="deleteList(index)">删除</button>
          </div>
          <div class="add-list-box" v-if="done.show">
            <textarea name="text" placeholder="在这里输入待做事项..." ref="modifyText">{{done.text}}</textarea>
            <p><button @click="modifyList(index)">修改</button></p>
          </div>
        </li>
      </ul>
复制代码

modifyBoxShow(index){
      store.getters.doingTodos.map((value) => {
        value.show = false;
      })
      store.getters.doingTodos[index].show = true;
    },
    modifyList(index){
      var modifyStatus = {
        id:store.getters.doingTodos[index].id,
        text:this.$refs.modifyText[index].value,
        status:false,
        show:false
      };
      store.commit('modifyList',modifyStatus);
    },
    finishList(index){
      var finishStatus = {
        id:store.getters.doingTodos[index].id,
        text:store.getters.doingTodos[index].text,
        status:true,
        show:false
      };
      store.commit('modifyList',finishStatus);
      this.doneNum = store.getters.doneTodos.length;
      this.doingNum = store.getters.doingTodos.length;
    },
复制代码

当修改时列表从显示的文本变为编辑框,由于列表都是一齐渲染的,在外面定义一个状态判断是否显示编辑框的话会使列表中的所有元素都变为编辑框,所以给每个元素定义了一个单独的状态值.
删除就是把对数组的操作改为

state.todos.splice(index,1);
复制代码

这个项目只用到同步操作,当我们需要异步操作时需要用到actions,类似于mutations但是actions不是直接更改,而是提交mutation

转载于:https://juejin.im/post/5c3daf48518825792d4c67ea