详解vuex的简单todolist例子


Posted in Javascript onJuly 14, 2019

一个简单的vuex应用的小例子,一段自己的学习记录。

todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除。

1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码

<template>
 <div class="hello">
  <input type="text">
  <button>增加事项</button>
  <ul>
   <li>item</li>
  </ul>
 </div>
</template>

要把`input`中的值在经过`button`点击后,显示在`li`中,`input`有`v-model`属性进行值的绑定,

让`li`的数据是一个数组。相当于在数组中push input的值。

2.在src目录下,新建一个store文件夹,创建一个index.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
  inputVal: 'lily',
  list: ['1', '2', '3']
 },
 mutations: {
  changeListValue(state, inputVal) {
   state.list.push(inputVal)
   state.inputVal = ''
  },
  handleDel(state, idx) {
   state.list.splice(idx, 1)
  }
 },
 actions: {
  changeListValue: ({commit}, inputVal) => {
   return commit('changeListValue', inputVal)
  },
  handleDel: ({commit}, idx) => {
   return commit('handleDel', idx)
  }
 }
})
export default store

3.回到HelloWorld.vue

<template>
 <div class="hello">
  <input v-model="$store.state.inputVal" type="text">
  <button @click="changeListValue(inputVal)">增加事项</button>
  <ul v-for="(item, idx) in list">
   <li @click="handleDel(idx)">{{item}}</li>
  </ul>
 </div>
</template>

<script>
 import {mapState, mapActions} from 'vuex'
 export default {
  name: 'HelloWorld',
  computed: {
   ...mapState(['list', 'inputVal'])
  },
  methods: {
   ...mapActions(['changeListValue', 'handleDel'])
  }
 }
</script>

4.完成以后,有个困扰就是在input的v-model中写inputVal会报错,请大神帮我解答下。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类式继承的具体实现方法
Dec 31 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
AngularJS实现ajax请求的方法
Nov 22 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
element-ui表格数据转换的示例代码
Aug 24 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JS实现网页时钟特效
Mar 25 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
Jul 13 #Javascript
微信小程序解析富文本过程详解
Jul 13 #Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 #Javascript
微信小程序Echarts覆盖正常组件问题解决
Jul 13 #Javascript
微信小程序图片左右摆动效果详解
Jul 13 #Javascript
vue iview多张图片大图预览、缩放翻转
Jul 13 #Javascript
vue实现图片预览组件封装与使用
Jul 13 #Javascript
You might like
个人站长制做网页常用的php代码
2007/03/03 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
Yii框架登录流程分析
2014/12/03 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
浅谈JavaScript超时调用和间歇调用
2015/08/30 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
Angular2 (RC4) 路由与导航详解
2016/09/21 Javascript
thinkphp标签实现bootsrtap轮播carousel实例代码
2017/02/19 Javascript
react-router中的属性详解
2017/06/01 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
关于 angularJS的一些用法
2017/11/29 Javascript
JavaScript实现求最大公共子串的方法
2018/02/03 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
利用python求相邻数的方法示例
2017/08/18 Python
python如何实现图片压缩
2020/09/11 Python
python 如何对logging日志封装
2020/12/02 Python
No module named ‘win32gui‘ 的解决方法(踩坑之旅)
2021/02/18 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
日本7net购物网:书籍、漫画、杂志、DVD、游戏邮购
2017/02/17 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
公司委托书格式范文
2014/04/04 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
小学生美德少年事迹材料
2014/08/24 职场文书
2015年春节标语口号
2014/12/09 职场文书
婚礼答谢礼品
2015/01/20 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书
SQL实现LeetCode(197.上升温度)
2021/08/07 MySQL
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS
pytorch中的torch.nn.Conv2d()函数图文详解
2022/02/28 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang