使用vuex做一个简单的todolist案例

首先使用vue搭建我们的项目

创建一个项目: vue create 项目名称
启动项目: npm run serve
安装vuex：npm install vuex
在src文件夹下创建一个store文件夹 里边创建一个index文件
引入vue和vuex并进行使用
里边写上state getters mutations actions 并进行抛出
在min.js里边引入我们的index.js
在src里创建一个文件夹和组件
在app.vue里引入我们的todolist.vue组件
然后再todolist.vue分别引入todo-input todo-list。

在项目里边写我们的代码:

在todo-input的div里写上一个输入框和按钮

在state里添加一个数组

在todo-list里添加一个li标签并使用v-for循环出来

这样我们的结构就形成了

首先在点击add按钮时候把输入框的内容给添加到下边的标签里

给input标签标签绑定一个v-model并在当前文件里写上自定义属性

在点击add按钮时候把value值传到我们的state里


然后再写上一个可以删除的按钮


然后可以根据ior是否为true来给添加一个背景颜色

这样一个简单的todolist案例就完成了