详解vuex的简单todolist例子

一个简单的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会报错，请大神帮我解答下。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue + vuex todolist的实现示例代码

    vue + vuex todolist的实现示例代码

    todolist demo 最近有空重新看了一下vuex,然后又写了一个todolist小demo,原理比较简单,主要是自己规范了一下代码的写法. 下载地址 :vue-test_jb51.rar 效果图 根组件 <template> <div class='container'> <h1 class='title'>todo list demo</h1> <type-filter :types='types' :filter='filter' :han

  • 详解vuex的简单todolist例子

    一个简单的vuex应用的小例子,一段自己的学习记录. todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除. 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> <div class="hello"> <input type="text"> <button>增加事项</button> <ul> &l

  • 详解vuex的简单使用

    1 目录的配置 根据官方推荐在src目录里面创建store目录 2 创建store里面的文件 根据官方推荐创建 actions.js, getters.js,index.js, mutations.js, mutations-types.js, state.js 2.1 state.js state.js: 是vuex的单一状态数,用一个对象就包含了全部的应用层级状态.至此它便作为一个『唯一数据源(SSOT)』而存在.这也意味着,每个应用将仅仅包含一个 store 实例.单一状态树让我们能够直接

  • 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    详解vuex中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • 详解OpenCV中简单的鼠标事件处理

    详解OpenCV中简单的鼠标事件处理

    目录 cv2.setMouseCallback函数语法 回调函数 谈及鼠标事件,就是在触发鼠标按钮后程序所做出相应的反应,但是不影响程序的整个线程.这有些像异步处理.鼠标事件响应不会一直等着我们去按而后续程序不执行,这样会造成阻塞,而是在我们不按鼠标的时候程序也会正常进行,按的时候会调用鼠标的事件响应,这个过程就像程序一边正常运行一边等待鼠标响应. 为了将鼠标响应和操作画面进行绑定,我们要创建一个回调函数: cv2.setMouseCallback函数语法 cv2.setMouseCallbac

  • 一文详解Vue3中简单diff算法的实现

    一文详解Vue3中简单diff算法的实现

    目录 简单Diff算法 减少DOM操作 例子 结论 实现 DOM复用与key的作用 例子 虚拟节点的key 实现 找到需要移动的元素 探索节点顺序关系 实现 如何移动元素 例子 实现 添加新元素 例子 实现 移除不存在的元素 例子 实现 总结 简单Diff算法 核心Diff只关心新旧虚拟节点都存在一组子节点的情况 减少DOM操作 例子 // 旧节点 const oldVNode = { type: 'div', children: [ { type: 'p', children: '1' },

  • 详解JavaScript实现简单的词法分析器示例

    目录 正文 什么是词法分析器? 实现一个简单的词法分析器 总结 正文 词法分析是编译器的一项重要工作,其目的是将源代码转换成单个单词(token)的序列,方便后续语法分析器(parser)对其进行分析.在本文中,我们将使用 JavaScript 实现一个简单的词法分析器,以便更好地理解其原理. 什么是词法分析器? 在编译器中,词法分析器是将源代码分割成单个单词的程序.它将输入的字符流转换为单词流,这些单词(token)在后续的编译过程中将被用来构建语法树(parse tree). 词法分析器通常

  • 详解python定时简单爬取网页新闻存入数据库并发送邮件

    详解python定时简单爬取网页新闻存入数据库并发送邮件

    本人小白一枚,简单记录下学校作业项目,代码十分简单,主要是对各个库的理解,希望能给别的初学者一点启发. 一.项目要求 1.程序可以从北京工业大学首页上爬取新闻内容:http://www.bjut.edu.cn 2.程序可以将爬取下来的数据写入本地MySQL数据库中. 3.程序可以将爬取下来的数据发送到邮箱. 4.程序可以定时执行. 二.项目分析 1.爬虫部分利用requests库爬取html文本,再利用bs4中的BeaultifulSoup库来解析html文本,提取需要的内容. 2.使用pymy

  • C++JSON库CJsonObject详解(轻量简单好用)

    C++JSON库CJsonObject详解(轻量简单好用)

    1. JSON概述 JSON: JavaScript 对象表示法( JavaScript Object Notation) .是一种轻量级的数据交换格式. 它基于ECMAScript的一个子集.许多编程语言都很容易找到JSON 解析器和 JSON 库. JSON 文本格式在语法上与创建 JavaScript 对象的代码相同.不同语言的不同json库对json标准的支持不尽相同,为了能让尽可能多的json库都能正常解析和生成json,定义JSON的规范很重要,推荐一个JSON规范<JSON风格指南

  • 详解Vuex中getters的使用教程

    详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • 详解java实现简单扫码登录功能(模仿微信网页版扫码)

    详解java实现简单扫码登录功能(模仿微信网页版扫码)

    java实现简单扫码登录功能 模仿微信pc网页版扫码登录 使用js代码生成qrcode二维码减轻服务器压力 js循环请求服务端,判断是否qrcode被扫 二维码超时失效功能 二维码被扫成功登录,服务端产生sessionId,传到页面使用js保存cookie 多线程 生成qrcode相关js jquery.qrcode.js 代码 页面div <div class="pc_qr_code"> <input type="hidden" id="

随机推荐