Installation dependent Environment

Vue init webpack install vuex NPM install –save vuex

Determine the function

TodoList has add/remove/modify/complete functions

store

Create a new file to store variables. The initial structure is as follows

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

export default new Vuex.Store({
  
})
Copy the code

Create some initial data

state: {
    todos: [
      { id: 0, text: 'Complete the XXX achievement page of XXX Project'.done: true, show:false},
      { id: 1, text: 'Complete XXX project XXX achievement page 1'.done: false, show:false },
      { id: 2, text: 'Complete XXX project XXX achievement page 2'.done: true, show:false },
      { id: 3, text: 'Complete XXX project XXX achievement page 3'.done: true , show:false},
      { id: 4, text: 'Complete XXX project XXX achievement page 4'.done: true , show:false},
      { id: 5, text: 'Complete XXX project XXX achievement page 5'.done: false, show:false },
      { id: 6, text: 'Complete XXX project XXX achievement page 6'.done: true , show:false},
      { id: 7, text: 'Complete XXX project XXX achievement page 7'.done: false, show:false}},Copy the code

Done indicates whether the modification is complete, and show indicates whether the modification is displayed. How to get the initial variable:

getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    doingTodos: state => {
      returnstate.todos.filter(todo => ! todo.done) } },Copy the code

By filtering, get the status of ongoing and completed tasks: introduced first in the vUE file being used

 import store from './store'
Copy the code

Global import doesn’t seem to work, right? To be solved

computed:{
    doneList() {return store.getters.doneTodos;
    },
    doingList() {returnstore.getters.doingTodos; }},Copy the code
<ul class="done-ul">
        <li v-for="done in doneList" :key="done.id">
          <div class="show-list">{{done.text}}</div>
        </li>
      </ul>
Copy the code

Mutations is the method for changing the state in the store. The mutations are delivered via a COMMIT commit, which only works synchronously with store.js

mutations: {
    addList: (state, addText) => {
      state.todos.push({
        id:state.todos[state.todos.length-1].id+1,
        text:addText,
        done:false,
        show:false}}})Copy the code

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; }}}Copy the code
<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="Enter to-do list here..." ref="addText"></textarea>
        <p><button @click="addList"</button></p> </div>Copy the code

Since I have a list count, I need to recalculate the values of the input and textarea when adding and deleting and initializing the rendering. This.$refs.addText

Modify/complete 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})}Copy the code

Since modifying is modifying text and completing is modifying done, it is processed together

<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="Enter to-do list here..." ref="modifyText">{{done.text}}</textarea>
            <p><button @click="modifyList(index)"</button></p> </div> </li> </ul>Copy the code
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;
    },
Copy the code

When modified, the list changes from displayed text to edit boxes. Since the list is rendered simultaneously, defining a status check on the outside will make all elements in the list become edit boxes, so we define a separate status value for each element. Delete is to change the operation on an array to

state.todos.splice(index,1);
Copy the code

This project only uses synchronous operation. When we need asynchronous operation, we need to use actions, similar to mutations, but actions are not changed directly, but submit mutation