详解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对checkbox操作 (循环获取)
May 20 Javascript
JS代码同步文本框内容的实例方法
Jul 12 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
省市区三级联动jquery实现代码
Apr 15 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
Dec 13 Javascript
Windows下Node.js安装及环境配置方法
Sep 18 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
使用Vue.js 和Chart.js制作绚丽多彩的图表
Jun 15 Javascript
javascript实现简单页面倒计时
Mar 02 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
vue打包时去掉所有的console.log
Apr 10 Vue.js
改进 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
php下使用SimpleXML 处理XML 文件
2010/02/27 PHP
PHP 5.3.1 安装包 VC9 VC6不同版本的区别是什么
2010/07/04 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
裁剪字符串trim()自定义改进版
2013/04/10 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
ajax+jQuery实现级联显示地址的方法
2015/05/06 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
Vue.js添加组件操作示例
2018/06/13 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
小程序实现留言板
2018/11/02 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
在Python中使用Mako模版库的简单教程
2015/04/08 Python
Python代码解决RenderView窗口not found问题
2016/08/28 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python操作 hbase 数据的方法
2016/12/18 Python
SVM基本概念及Python实现代码
2017/12/27 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python实现word2Vec model过程解析
2019/12/16 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
次世代生活态度:Hypebeast
2018/07/05 全球购物
办公室主任岗位职责
2013/11/08 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
户外亲子活动策划方案
2014/02/07 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
俞敏洪北大演讲稿
2014/05/22 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL