详解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 相关文章推荐
document.getElementById介绍
Sep 13 Javascript
js里取容器大小、定位、距离等属性搜集整理
Aug 19 Javascript
js实现简单登录功能的实例代码
Nov 09 Javascript
用Jquery.load载入页面实现局部刷新
Jan 22 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
jquery if条件语句的写法
May 19 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
Es6 Generator函数详细解析
Feb 24 Javascript
小程序视频列表中视频的播放与停止的示例代码
Jul 20 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
Vue全局事件总线你了解吗
Feb 24 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过滤html标记属性类用法实例
2014/09/23 PHP
php中实现获取随机数组列表的自定义函数
2015/04/02 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
JS之Date对象和获取系统当前时间详解
2014/01/13 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
在Vue中如何使用Cookie操作实例
2017/07/27 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
Django开发中复选框用法示例
2018/03/20 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Selenium的使用详解
2018/10/19 Python
pycharm 取消默认的右击运行unittest的方法
2018/11/29 Python
通过PYTHON来实现图像分割详解
2019/06/26 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
python中np是做什么的
2020/07/21 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
联强国际笔试题面试题
2013/07/10 面试题
警察思想汇报
2014/01/04 职场文书
数控技术专科生自我评价
2014/01/08 职场文书
自强之星事迹材料
2014/05/12 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
大学新闻系自荐书
2014/05/31 职场文书
自我查摆剖析材料
2014/10/11 职场文书
迎国庆主题班会
2015/08/17 职场文书
使用pytorch实现线性回归
2021/04/11 Python
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android