详解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 text,radio,checkbox,select操作实现代码
Jul 09 Javascript
Jquery ui css framework
Jun 28 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
使用AngularJS处理单选框和复选框的简单方法
Jun 19 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
javascript 原型与原型链的理解及实例分析
Nov 23 Javascript
Javascript数组及类数组相关原理详解
Oct 29 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 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函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
codeigniter集成ucenter1.6双向通信的解决办法
2014/06/12 PHP
PHP多进程编程实例
2014/10/15 PHP
php unlink()函数使用教程
2018/07/12 PHP
JavaScript 基础函数_深入剖析变量和作用域
2016/05/18 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
Node.js学习之地址解析模块URL的使用详解
2017/09/28 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python内置函数的用法实例教程
2014/09/08 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
matplotlib简介,安装和简单实例代码
2017/12/26 Python
python实现关键词提取的示例讲解
2018/04/28 Python
利用Python如何制作好玩的GIF动图详解
2018/07/11 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
详解Python sys.argv使用方法
2019/05/10 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
PyCharm 2020.2下配置Anaconda环境的方法步骤
2020/09/23 Python
python跨文件使用全局变量的实现
2020/11/17 Python
python 如何对logging日志封装
2020/12/02 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
高三毕业生自我鉴定
2013/12/20 职场文书
主办会计岗位职责
2014/03/13 职场文书
根叔历年演讲稿
2014/05/20 职场文书
股东出资证明书范例
2014/10/04 职场文书
毕业实习计划书
2015/01/16 职场文书
千手观音观后感
2015/06/03 职场文书
Python实现简单的猜单词
2021/06/15 Python