详解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 相关文章推荐
基于jquery的文本框与autocomplete结合使用(asp.net+json)
May 30 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
js控住DOM实现发布微博效果
Aug 30 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
微信小程序 本地图片按照屏幕尺寸处理
Aug 04 Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 Javascript
Vue源码解析之Template转化为AST的实现方法
Dec 14 Javascript
JavaScript如何获取一个元素的样式信息
Jul 29 Javascript
微信小程序开发之转发分享功能
Oct 22 Javascript
Node.js+Vue脚手架环境搭建的方法步骤
Mar 08 Javascript
详解JavaScript 的执行机制
Sep 18 Javascript
Vue获取微博授权URL代码实例
Nov 04 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中instanceof 与 is_a()区别分析
2015/03/03 PHP
使用 laravel sms 构建短信验证码发送校验功能
2017/11/06 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
2010/03/02 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
Bootstrap基础学习
2015/06/16 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
JS读写CSS样式的方法汇总
2016/08/16 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
2016/09/24 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
基于vue.js实现购物车
2020/01/15 Javascript
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
Python如何实现文本转语音
2016/08/08 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
python实现写数字文件名的递增保存文件方法
2018/10/25 Python
在Python中实现shuffle给列表洗牌
2018/11/08 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
关于numpy数组轴的使用详解
2019/12/05 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
中海讯通笔试题
2015/09/15 面试题
总经理职责
2013/12/22 职场文书
货车司机岗位职责
2014/03/18 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
婚礼新人答谢词
2015/01/04 职场文书
go类型转换及与C的类型转换方式
2021/05/05 Golang