vue+vuex实现 counter计数器

vue+vuex实现 counter计数器

框架搭建好过后输入npm run dev的时候不会直接打开浏览器,在config文件夹找到index.js文件夹 把autoOpenBrowser: false改为autoOpenBrowser: true,从新在命令行输入npm run dev,这是就会自动打开浏览器。 如图修改

现在做个简单的demo示例:counter(计数器)

一、文件夹与文件的创建

  • 1、首先要在components文件夹下面创建counter的一个文件夹
  • 2、然后在counter文件夹里创建文件app.vue,然后就可以开始写代码了

代码如图:

上面代码就是这个简单的vue应用,左边是main.js里面注册组件的代码,右边是我们写的计数器的代码,点击加(“+”)或者减(“-”)的时候浏览器上面的点击次数会变化,就是代码里面data里的count这个变量或发生变化

网页显示如图:

二、状态管理Vuex(状态机)

我们现在在上面这个demo里面引入vuex看看效果

  • 1、在命令行使用npm下载vuex依赖,输入下面命令

    npm install vuex --save

    如图:

这就是成功了的,现在看package.json文件里面就会多一段代码:"vuex": "^3.0.1"

  • 2、在components文件夹创建一个store文件夹,并在store文件夹下面创建一个store.js文件,现在先不管store.js文件,先在main.js里注册组件(全局注册)

    如图:

  • 3、在components/store/store.js文件里引入Vue、Vuex和counter里面的store.js文件

    如图:

  • 4、在counter文件夹里面的app.vue文件里面引入vuex的方法mapState和mapMutations辅助函数
  • 5、在counter文件夹里面创建store.js文件,然后看看加入vuex后的代码的变化

    如图:

现在可以对比一下加了vuex和没有加vuex的代码区别

源代码:github

原文地址:https://www.cnblogs.com/WRS7/p/9249036.html

时间: 2024-10-13 05:10:05

vue+vuex实现 counter计数器的相关文章

MapReducer Counter计数器的使用,Combiner ,Partitioner,Sort,Grop的使用,

一:Counter计数器的使用 hadoop计数器:可以让开发人员以全局的视角来审查程序的运行情况以及各项指标,及时做出错误诊断并进行相应处理. 内置计数器(MapReduce相关.文件系统相关和作业调度相关) 也可以通过http://master:50030/jobdetails.jsp查看 /** * 度量,在运行job任务的时候产生了那些j输出.通过计数器可以观察整个计算的过程,运行时关键的指标到底是那些.可以表征程序运行时一些关键的指标. * 计数器 counter 统计敏感单词出现次数

python的collections.Counter()计数器

collections中的Counter计数器 python模块collections提供了内置容器类型dict,list,set,tuple更专业的容器数据类型. Counter计数器 计数器(Counter)是一个容器,用来跟踪值出现了多少次. 计数器支持三种形式的初始化.构造函数可以调用序列,包含key和计数的字典,或使用关键词参数. >>> import collections >>> print collections.Counter(['a','b','c'

vuejs学习——vue+vuex+vue-router项目搭建(一)

前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

Vue Vuex state mutations

Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vuex中用于存储数据 var state = { count:1 } 4.mutations里放的是方法,主要用于改变state中的数据 var mutations = { incCount(){ ++state.count; } } 5.实例化vuex.Store consta store = ne

Vue+Vuex实现自动登录 升级版

Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录 ? ??? 在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: ? ??? 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization ?

[ css 计数器 counter ] css中counter计数器(序列数字字符自动递增)应用问题讲解及实例演示

一.挖坟不可耻 CSS计数器不是什么新鲜玩意了,早在10年春暖花开的时候,我写的“CSS content内容生成技术以及应用”一文就要提到(见下图),不过当时是作为其中一员介绍.就像例行的溜新同事一样,虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象,但由于介绍的同事茫茫多,我只是其中一员.很自然,个把月之后,我就会被无情的淡忘,除了那依稀的面庞,因为毕竟长得还算比较抽象. 然而,CSS计数器的斗量显然不是短短几句介绍能够显露的,所谓人不可貌相.就像我,说不定某年某月,当年像驴子一样被溜的

关于Vue vuex vux 文档

01. vue 链接 http://vuejs.org.cn/guide/ 02. vuex  ----->>状态管理模块儿<<------- https://vuex.vuejs.org/zh-cn/intro.html 03. vux  ------>>基于vue 和 we_ui<<----------- https://vuxjs.gitbooks.io/vux/content/ ps: 最近一直在用vux 写微信项目,虽然目前可以熟练的使用vux ,