最近在研究Vuex2.0,搞了好几天终于有点头绪了。

首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解。

废话少说,直接上干货。这是官网上的一个计数的实例。

先来起个项目。

第一步、下载安装vue项目

打开git ,运行 npm install --global vue-cli 这是安装vue的命令行(首次安装需要运行这条命令,如果之前装过vue-cli,这里就不需要再安装了)

$ vue init webpack my-project(这里的my-project是你的工程名字,可以任意起)

$ cd my-project(进入my-project我的工程文件夹)

$ npm install(安装package.json中依赖的工程源文件,如果是初学者,可以把eslint,router都禁止了)

$ npm run dev   (运行此项目)

起项目成功

第二步、安装Vuex

在基本的Vuex中首先要安装vuex到项目中,详情请看Vuex官网下载安装。Vuex官方下载通道

这里我直接使用了NPM安装下载的。方法很简单,打开终端输入npm install vuex -S

下载安装Vuex

安装完成后,来创建文件。创建好的文件目录如下:

现在的文件目录是这样

首先在Counter.vue中我们写入视图中要显示的内容:

Counter.vue

然后配置store.js

store.js

配置main.js

main.js

至此项目可以运行一下,看一下效果了

运行成功

实例二、

然后我们来点逼格高一点的,把vuex文件中的内容拆开,写成组件化的形式,以此来加深对vuex中核心概念(state,getters,mutations,actions,modules)的理解。为了区分,我又重新起了一个项目vuex-2-demo。

还是先看一下工程目录:

vuex-2-demo工程目录

然后来配置Counter.vue,

Counter.vue

然后来看一下store的入口文件index.js

index.js

接下来是actions.js文件

actions.js

接下来是mutations.js文件

mutations.js

下面是getters.js

getters.js

好了,接下来是主文件main.js

main.js

到此所有的文件都已经配置完了,可以运行一下试试了,打开终端,输入npm run dev

你会看到和第一个demo中同样的效果。

运行成功图

好了,简单的两个vuex2.0 的小Demo已经完成了,这个例子适用初学者,当然也欢迎大神来纠察指正,本人热衷于前端,欢迎前端爱好者一块交流谈论。

总结:

通过这两个小例子,我已成功的配置了Vuex2.0,并成功的跑通了,加深了对Vuex2.0各核心概念的理解。

学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!

Vuex2.0边学边记+两个小例子的更多相关文章

  1. vuex2.0+两个小例子

    首先vuex概念比较多,一定要搞懂里面的概念,可以参考官网Vuex2.0概念,我写此文的目的是希望能对前端爱好者提供个参考,加深对vuex2.0各核心概念的理解. 废话少说,直接上干货.这是官网上的一 ...

  2. libconfig第二篇----两个小例子

    本文只看粗体即可,太多catch语句.两个例子均来自libconfig包的example文件夹下面,. 例子一: #include <iostream> #include <ioma ...

  3. 学习HttpClient,从两个小例子开始

    前言 HTTP(Hyper-Text Transfer Protocol,超文本传输协议)在如今的互联网也许是最重要的协议,我们每天做的很多事情都与之有关,比如,网上购物.刷博客.看新闻等.偶尔你的上 ...

  4. 两个小例子彻底明白python decorator

    一:没有什么实际意思,就是单纯的理解decorator.使用装饰器完全可以阻止方法中的代码执行. class json_test(object): def __init__(self, *arg, * ...

  5. 关于Finereport移动端报表二次开发的两个小例子

    例1:刷新页面 1. 问题描述 A超链至B填报,B提交数据后返回A时,A自动刷新显示新的数据. 2. 解决方案 1. contentPane.setAppearRefresh();  //在A的加载结 ...

  6. 如何从 0 开始学 Ruby on Rails

    如何从 0 开始学 Ruby on Rails (漫步版)Ruby 是一门编程语言,Ruby on Rails 是 Ruby 的一个 web 框架,简称 Rails. 有很多人对 Rails 感兴趣, ...

  7. 从0系统学Android--4.1探究碎片

    从0系统学Android--4.1探究碎片 本系列文章目录:更多精品文章分类 本系列持续更新中.... 初级阶段内容参考<第一行代码> 第四章:手机平板要兼顾--探究碎片 平板电脑和手机最 ...

  8. 从0系统学Android--3.6 RecyclerView

    从0系统学Android--更强大的滚动控件---RecyclerView 本系列文章目录:更多精品文章分类 本系列持续更新中.... 参考<第一行代码> 首先说明一点昨天发了一篇关于 L ...

  9. 从0系统学Android--3.5 最常用和最难用的控件---ListView

    从0系统学Android-- 3.5 最常用和最难用的控件---ListView 本系列文章目录:更多精品文章分类 本系列持续更新中.... 3.5 最常用和最难用的控件---ListView Lis ...

随机推荐

  1. Java多线程—阻塞队列和生产者-消费者模式

    阻塞队列支持生产者-消费者这种设计模式.该模式将“找出需要完成的工作”与“执行工作”这两个过程分离开来,并把工作项放入一个“待完成“列表中以便在随后处理,而不是找出后立即处理.生产者-消费者模式能简化 ...

  2. 函数直接写在html页面的<script>里可以调用,但是单独放在js文件里不能调用

    1.函数直接写在页面相当于是你本页调用,所以理所应当可以调用 2.js单独文件不能调用是因为你没有引用js文件,如果引用了的话,也是可以调用的. 引用方式,你可以直接拖拽(我一般都是拖拽,因为路径准确 ...

  3. Eclipse下,修改MAVEN 中央仓库地址,解决maven下载慢问题

    作用于所有工作空间: 1.逐项打开:eclipse->preference->Maven->User Settings.按窗口中的User Settings文本框显示的路径,创建se ...

  4. Docker 入门相关

    什么是Docker和容器 可能是把Docker的概念讲的最清楚的一篇文章 为什么要用Docker 相关网址 Window平台Docker下载 一些基本知识 Volume docker volume l ...

  5. Java项目打包成exe的详细教程

    Java项目打包成exe的详细教程 把Java项目打包成exe共分为以下两步: 1. 利用Eclipse先把Java项目先打成jar包 2. 利用exe4j工具把jar包转成exe 这里以Java项目 ...

  6. 使用单体模式设计原生js插件

    ----------基于上次写的jquery插件进行改造  http://www.cnblogs.com/GerryOfZhong/p/5533773.html 背景:jQuery插件依赖jQuery ...

  7. Linux系统快速查找文件

    有时候下载新的文件或安装新的包 但是却搞不清默认放在哪个目录了,这个时候可以使用locate命令进行快速模糊查找 比如我使用 go get github.com/coreos/bbolt/... 在一 ...

  8. memcached 学习笔记 3

    适合什么场合 memcached不是万能的,它也不是适用在所有场合. Memcached是“分布式”的内存对象缓存系统,那么就是说,那些不需要“分布”的,不需要共享的,或者干脆规模小到只有一台服务器的 ...

  9. ASP.NET Core 集成 WebSocket

    1. 环境 AspNetCore Web 2.0 (MVC) Windows 10 IIS 10 Express/IIS VS 2017 2.如何配置 在已有的或者新创建的 AspNet Core M ...

  10. Golang之并发资源竞争(互斥锁)

    并发本身并不复杂,但是因为有了资源竞争的问题,就使得我们开发出好的并发程序变得复杂起来,因为会引起很多莫名其妙的问题. package main import ( "fmt" &q ...