详解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 相关文章推荐
Opacity.js
Jan 22 Javascript
jQuery.query.js 取参数的两点问题分析
Aug 06 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
javascript中scrollTop详解
Apr 13 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
jquery+ajax实现省市区三级联动效果简单示例
Jan 04 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
ReactJs实现树形结构的数据显示的组件的示例
Aug 18 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
vue实现折线图 可按时间查询
Aug 21 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP删除数组中的特定元素的代码
2012/06/28 PHP
关于PHP结束标签的使用细节探讨及联想
2013/03/04 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
php输出形式实例整理
2020/05/05 PHP
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
2006/11/07 Javascript
JavaScript调用后台的三种方法实例
2013/10/17 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
微信小程序开发一键登录 获取session_key和openid实例
2016/11/23 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
JavaScript自定义文本框光标
2017/03/05 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
seajs中最常用的7个功能、配置示例
2017/10/10 Javascript
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
更优雅的微信小程序骨架屏实现详解
2019/08/07 Javascript
vue项目打包后请求地址错误/打包后跨域操作
2020/11/04 Javascript
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python实现登录接口的示例代码
2017/07/21 Python
python学生信息管理系统(初级版)
2018/10/17 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python利用faker库批量生成测试数据
2020/10/15 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
宠物店的创业计划书范文
2014/01/11 职场文书
给老婆的搞笑检讨书
2014/01/12 职场文书
幼儿园老师辞职信
2014/01/20 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
委托书如何写
2014/08/30 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
冰峪沟导游词
2015/02/09 职场文书
英语辞职信怎么写
2015/02/28 职场文书
政审证明材料
2015/06/19 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Pytorch可视化的几种实现方法
2021/06/10 Python