刘贵学博客

夯实Vue系列 Demo 6 综合实例 TodoList(Vuex 实现)

上文Demo5里已经实现了 todolist,功能如下:

  • 新增:在输入框中输入内容,回车可新增;
  • 修改:单击条目可设置为完成;
  • 删除:双击条目可删除;

Demo5里的 DateStore.js 是利用浏览器的localStorage保存数据的,Vue中有专门的组件来处理数据存储: Vuex。

本例将使用Vuex来处理 TodoList里的 存储功能。

Vuex 简介

Vuex 里的一些核心概念:

这里有一个经典的概念流程的图,如下:

  1. Vue 的组件是通过数据 【state】来渲染的, 从Store中获取指定的 State:

    • Getter 的调用方法如下:

    • Getter 实现如下:

    todoItems: (state) => {
    return state.todoItems
    }
    
  2. Vue 的组件的修改会设置 State 流程如下:

    • 组件通过 store.dispatch 将设置 传给 Action

    • Action 做一些处理之后,使用 commit 方法,调用 mutation,调用方法如下:

    • mutation 修改State存入 Store, 实现方法如下:

    setTodoItems(state, todoItems) {
    state.todoItems = todoItems
    }
    

运行效果

本文中的所有代码,请参考:
https://coding.net/u/guixue/p/vue-starter/git/commit/84e6a3127e5a1a4dd4