Vue全家桶（Vue-cli、Vue-route、vuex）

时间 2019-11-06

标签 vue 全家 cli route vuex 栏目应用数学繁體版

原文原文链接

摘要

学习本篇以前要具有必定的vue基础知识，能够先看一下Vue基础（环境配置、内部指令、全局API、选项、内置组件）css

一、Vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架，这里牵扯的东西不少，有webpack，npm，nodejs，babel等等。html

官网：https://cli.vuejs.org/guide/前端

GitHub：https://github.com/vuejs/vue-clivue

1.一、安装vue-cli

首先要安装 npm , npm 的安装在基础视频中有。npm没有问题，接下来咱们能够用npm 命令安装vue-cli了，在命令行输入下面的命令：node

npm install -g @vue/cli
//卸载  npm uninstall -g @vue/cli

-g :表明全局安装。若是你安装时报错，通常是网络问题，你能够尝试用cnpm来进行安装。安装完成后，能够用vue
-V :来进行查看 vue-cli的版本号。注意这里的V是大写的。我这里版本号是3.4.1

PS G:\Demos\VUE\VUECLI> vue --version
3.4.1

若是vue -V的命令管用了，说明已经顺利的把vue-cli安装到咱们的计算机里了。\webpack

若是想使用2.X版本的命令来建立项目，则能够执行如下命令git

npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同

1.二、初始化项目

咱们用 vue init 命令来初始化项目，具体看一下这条命令的使用方法。程序员

vue init <template-name> <project-name>

init ：表示我要用vue-cli来初始化项目github

<template-name> ：表示模板名称，vue-cli官方为咱们提供了5种模板web

<project-name> ：标识项目名称，这个你能够根据本身的项目来起名字。

webpack-一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
webpack-simple-一个简单webpack+vue-loader的模板，不包含其余功能，让你快速的搭建vue的开发环境。
browserify-一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
browserify-simple-一个简单Browserify+vueify的模板，不包含其余功能，让你快速的搭建vue的开发环境。
simple-一个最简单的单页应用模板。

在实际开发中，通常咱们都会使用webpack这个模板，那咱们这里也安装这个模板，在命令行输入如下命令：

vue init webpack vuecliTest

输入命令后，会询问咱们几个简单的选项，咱们根据本身的须要进行填写就能够了。

Project name :项目名称，若是不须要更改直接回车就能够了。注意：这里不能使用大写，因此我把名称改为了vueclitest
Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
Author：做者，若是你有配置git的做者，他会读取。
Install vue-router? 是否安装vue的路由插件，咱们这里须要安装，因此选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。咱们这里不须要输入n，若是你是大型团队开发，最好是进行配置。
setup unit tests with Karma + Mocha? 是否须要安装单元测试工具Karma+Mocha，咱们这里不须要，因此输入n。
Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，咱们这里不须要，因此输入n。

这里咱们建立一个名为vuecliTest的项目

命令行出现上面的文字，说明咱们已经初始化好了第一步。命令行提示咱们如今能够做的三件事情。

cd vuecliTest 进入咱们的vue项目目录。

npm install 安装咱们的项目依赖包，也就是安装package.json里的包，若是你网速很差，你也可使用cnpm来安装。

npm run dev 开发模式下运行咱们的程序。给咱们自动构建了开发用的服务器环境和在浏览器中打开，并实时监视咱们的代码更改，即时呈现给咱们。

这时候咱们运行咱们建立的 vuecliTest 项目

咱们能够经过 http://localhost:8080/ 或者 http://192.168.56.1:8080/ 访问咱们的建立的项目

1.三、Vue-cli项目结构讲解

vue-cli脚手架工具就是为咱们搭建了开发所须要的环境，为咱们省去了不少精力。有必要对这个环境进行熟悉，咱们就从项目的结构讲起。

//Ps：因为版本实时更新和你选择安装的不一样（这里列出的是模板为webpack的目录结构），因此你看到的有可能和下边的有所差异。

.
|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     　　// 生产环境构建代码
|   |-- check-version.js             　　// 检查node、npm等版本
|   |-- dev-client.js                　　// 热重载相关
|   |-- dev-server.js                　　// 构建本地服务器
|   |-- utils.js                     　　// 构建工具相关
|   |-- webpack.base.conf.js         　　// webpack基础配置
|   |-- webpack.dev.conf.js          　　// webpack开发环境配置
|   |-- webpack.prod.conf.js         　　// webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                       // 开发环境变量
|   |-- index.js                     　　// 项目一些配置变量
|   |-- prod.env.js                  　　// 生产环境变量
|   |-- test.env.js                  　　// 测试环境变量
|-- node_modules                     // 项目开用到的包（可忽略）
|-- src                              // 源码目录
|   |-- components                   　　// vue公共组件
|   |-- store                        　　// vuex的状态管理
|   |-- App.vue                      　　// 页面入口文件
|   |-- main.js                      　　// 程序入口文件，加载各类公共组件
|-- static                           // 静态文件，好比一些图片，json数据等
|   |-- data                         　　// 群聊分析获得的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传须要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息
.

1.3.一、重要文件讲解

package.json：package.json文件是项目根目录下的一个文件，定义该项目开发所须要的各类模块以及一些项目配置信息（如项目名称、版本、描述、做者等）。
package.json 里的scripts字段，这个字段定义了你能够用npm运行的命令。在开发环境下，在命令行工具中运行npm run dev 就至关于执行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js .也就是开启了一个node写的开发行建议服务器。由此能够看出script字段是用来指定npm相关命令的缩写。
```
"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},
```
dependencies字段和devDependencies字段
- dependencies字段指项目运行时所依赖的模块；
- devDependencies字段指定了项目开发时所依赖的模块；
  在命令行中运行npm install命令，会自动安装dependencies和devDempendencies字段中的模块。

package.json还有不少相关配置，若是你想全面了解，能够专门去百度学习一下。

1.3.二、webpack配置相关

咱们在上面说了运行 npm run dev 就至关于执行了 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js ,说明这个文件至关重要，先来熟悉一下它。我贴出代码并给出重要的解释。

// 检查 Node 和 npm 版本
require('./check-versions')()
// 获取 config/index.js 的默认配置
var config = require('../config')
// 若是 Node 的环境没法判断当前是 dev / product 环境
// 使用 config.dev.env.NODE_ENV 做为当前的环境
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
// 使用 NodeJS 自带的文件路径工具
var path = require('path')
// 使用 express
var express = require('express')
// 使用 webpack
var webpack = require('webpack')
// 一个能够强制打开浏览器并跳转到指定 url 的插件
var opn = require('opn')
// 使用 proxyTable
var proxyMiddleware = require('http-proxy-middleware')
// 使用 dev 环境的 webpack 配置
var webpackConfig = require('./webpack.dev.conf')
// default port where dev server listens for incoming traffic
// 若是没有指定运行端口，使用 config.dev.port 做为运行端口
var port = process.env.PORT || config.dev.port
// Define HTTP proxies to your custom API backend
// https://github.com/chimurai/http-proxy-middleware
// 使用 config.dev.proxyTable 的配置做为 proxyTable 的代理配置
var proxyTable = config.dev.proxyTable
// 使用 express 启动一个服务
var app = express()
// 启动 webpack 进行编译
var compiler = webpack(webpackConfig)
// 启动 webpack-dev-middleware，将 编译后的文件暂存到内存中
var devMiddleware = require('webpack-dev-middleware')(compiler, {
  publicPath: webpackConfig.output.publicPath,
  stats: {
    colors: true,
    chunks: false
  }
})
// 启动 webpack-hot-middleware，也就是咱们常说的 Hot-reload
var hotMiddleware = require('webpack-hot-middleware')(compiler)
// force page reload when html-webpack-plugin template changes
compiler.plugin('compilation', function (compilation) {
  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
    hotMiddleware.publish({ action: 'reload' })
    cb()
  })
})
// proxy api requests
// 将 proxyTable 中的请求配置挂在到启动的 express 服务上
Object.keys(proxyTable).forEach(function (context) {
  var options = proxyTable[context]
  if (typeof options === 'string') {
    options = { target: options }
  }
  app.use(proxyMiddleware(context, options))
})
// handle fallback for HTML5 history API
// 使用 connect-history-api-fallback 匹配资源，若是不匹配就能够重定向到指定地址
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
// 将暂存到内存中的 webpack 编译后的文件挂在到 express 服务上
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
// 将 Hot-reload 挂在到 express 服务上
app.use(hotMiddleware)
// serve pure static assets
// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))
// 让咱们这个 express 服务监听 port 的请求，而且将此服务做为 dev-server.js 的接口暴露
module.exports = app.listen(port, function (err) {
  if (err) {
    console.log(err)
    return
  }
  var uri = 'http://localhost:' + port
  console.log('Listening at ' + uri + '\n')
  // when env is testing, don't need open it
  // 若是不是测试环境，自动打开浏览器并跳到咱们的开发地址
  if (process.env.NODE_ENV !== 'testing') {
    opn(uri)
  }
})

webpack.base.confg.js webpack的基础配置文件

...
...
module.export = {
    // 编译入口文件
    entry: {},
    // 编译输出路径
    output: {},
    // 一些解决方案配置
    resolve: {},
    resolveLoader: {},
    module: {
        // 各类不一样类型文件加载器配置
        loaders: {
        ...
        ...
        // js文件用babel转码
        {
            test: /\.js$/,
            loader: 'babel',
            include: projectRoot,
            // 哪些文件不须要转码
            exclude: /node_modules/
        },
        ...
        ...
        }
    },
    // vue文件一些相关配置
    vue: {}
}

1.3.三、.babelrc

Babel解释器的配置文件，存放在根目录下。Babel是一个转码器，项目里须要用它将ES6代码转为ES5代码。若是你想了解更多，能够查看babel的知识。

{
  //设定转码规则
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  //转码用的插件
  "plugins": ["transform-runtime"],
  "comments": false,
  //对BABEL_ENV或者NODE_ENV指定的不一样的环境变量，进行不一样的编译操做
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

1.3.四、.editorconfig

该文件定义项目的编码规范，编译器的行为会与.editorconfig文件中定义的一致，而且其优先级比编译器自身的设置要高，这在多人合做开发项目时十分有用并且必要。

root = true
[*]    // 对全部文件应用下面的规则
charset = utf-8                    // 编码规则用utf-8
indent_style = space               // 缩进用空格
indent_size = 2                    // 缩进数量为2个空格
end_of_line = lf                   // 换行符格式
insert_final_newline = true        // 是否在文件的最后插入一个空行
trim_trailing_whitespace = true    // 是否删除行尾的空格

这是比较重要的关于vue-cli的配置文件，固然还有不少文件，咱们会在之后的文章中讲解。

1.4解读Vue-cli的模板

咱们主要了解一下Vue-cli的模板操做，包括增长模板，修改模板，以及一个常规模板的基本结构。

1.4.1npm run build 命令

有小伙伴问我，如何把写好的Vue网页放到服务器上，那我就在这里讲解一下，主要的命令就是要用到 npm run build 命令。咱们在命令行中输入 npm run build 命令后，vue-cli会自动进行项目发布打包。你在package.json文件的scripts字段中能够看出，你执行的npm run build命令就相对执行的 node build/build.js

package.json的scripts 字段：

"scripts": {
  "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  "start": "npm run dev",
  "build": "node build/build.js"
},

在执行完 npm run build 命令后，在你的项目根目录生成了dist文件夹，这个文件夹里边就是咱们要传到服务器上的文件。

npm run build
//若是遇到如下错误npm: 6.5.0-next.0 should be >= 3.0.0，执行npm更新指令便可
npm install npm@latest -g

dist文件夹下目录包括：

index.html 主页文件:由于咱们开发的是单页web应用，因此说通常只有一个html文件。
static 静态资源文件夹：里边js、CSS和一些图片。

1.4.二、main.js文件解读

main.js是整个项目的入口文件,在src文件夹下：

import Vue from 'vue'      
import App from './App'
import router from './router'
Vue.config.productionTip = false   //生产环境提示，这里设置成了false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

经过代码能够看出这里引进了App的组件和的模板，它是经过 import App from './App' 这句代码引入的。咱们找到 App.vue 文件，打开查看。

1.4.三、App.vue文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

app.vue文件咱们能够分红三部分解读，

<template></template> 标签包裹的内容：这是模板的HTMLDom结构，里边引入了一张图片和 <router-view></router-view> 标签，<router-view>标签说明使用了路由机制。咱们会在之后专门拿出一篇文章讲Vue-router。
<script></script> 标签包括的js内容：你能够在这里些一些页面的动态效果和Vue的逻辑代码。
<style></style> 标签包裹的css内容：这里就是你平时写的CSS样式，对页面样子进行装饰用的，须要特别说明的是你能够用<style scoped></style>来声明这些css样式只在本模板中起做用。

1.4.五、router/index.js 路由文件

引文在app.vue中咱们看到了路由文件，虽然router的内容比较多，可是咱们先简单的看一下。下篇文章咱们就开始讲Vue-router。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

咱们能够看到import HelloWorld from '@/components/HelloWorld'这句话，文件引入了/components/HelloWorld.vue文件。这个文件里就配置了一个路由，就是当咱们访问网站时给咱们显示HelloWorld.vue的内容。

1.4.六、HelloWorld.vue文件解读

这个文件就是咱们在第一节课看到的页面文件了。也是分为<template><script><style>三个部分，之后咱们大部分的工做都是写这些.vue结尾的文件。如今咱们能够试着改一些内容，而后预览一下。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to My Blog ,I am 进击的辣条'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {

  color: #42b983;
}
</style>

总结：这个教程只是带着你大概浏览和重点讲解了vue-cli的知识，若是你想彻底弄明白vue-cli，我建议最好是有调理的阅读全部代码，这对你之后成为vue实际项目的开发颇有帮助。若是你是一个初学者，了解这些已经足够向下学习了。这篇教程结束后，咱们会学习vue-router的知识，vue-router是一个重点学习任务。

二、Vue-router

简介：因为Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中很是重要，在实际开发中只要编写一个页面就会操做vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并非指咱们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是咱们WebApp的连接路径管理系统。

有的小伙伴会有疑虑，为何咱们不能像原来同样直接用<a></a>标签编写连接哪？由于咱们用Vue做的都是单页应用，就至关于只有一个主的index.html页面，因此你写的<a></a>标签是不起做用的，你必须使用vue-router来进行管理。

2.一、Vue-router入门

2.1.一、安装vue-router

vue-router是一个插件包，因此咱们仍是须要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

npm install vue-router --save-dev

若是你安装很慢，也能够用cnpm进行安装，若是你在使用vue-cli中已经选择安装了vue-router，那这里不须要重复安装了。

2.1.二、解读router/index.js文件

咱们用vue-cli生产了咱们的项目结构，你能够在 src/router/index.js 文件，这个文件就是路由的核心文件

import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import HelloWorld from '@/components/HelloWorld'  //引入根目录下的HelloWorld.vue组件

Vue.use(Router)  //Vue全局使用Router

export default new Router({
  routes: [                   //配置路由，这里是个数组
    {                         //每个连接都是一个对象
      path: '/',              //连接路径
      name: 'HelloWorld',     //路由名称，
      component: HelloWorld   //对应的组件模板
    }
  ]
})

上边的代码中已经对每行都进行了注释，其实在这个路由文件里只配置了一个功能，就是在进入项目时，显示HelloWorld.vue里边的内容代码。

2.1.三、增长一个Hi的路由和页面

对路由的核心文件熟悉后，咱们试着增长一个路由配置，咱们但愿在地址栏输入 http://localhost:8080/#/hi 的时候出现一个新的页面，先来看一下咱们但愿获得的效果。

在src/components目录下，新建 Hi.vue 文件。w

编写文件内容，和咱们以前讲过的同样，文件要包括三个部分<template><script>和<style>。文件很简单，只是打印一句话。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hi',
  data () {
    return {
      msg: 'Hi, I am 进击的辣条'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

引入 Hi组件：咱们在router/index.js文件的上边引入Hi组件
```
import Hi from '@/components/Hi'
```

增长路由配置：在router/index.js文件的routes[]数组中，新增长一个对象，代码以下。

{
  path: '/hi',
  name: 'Hi',
  component: Hi
}

经过上面的配置已经能够增长一个新的页面了。是否是觉的本身的Vue功力一会儿就提高了一个档次。为了方便小伙伴查看，贴出如今的路由配置文件:

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'


Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [ //配置路由，这里是个数组
    { //每个连接都是一个对象
      path: '/', //连接路径
      name: 'HelloWorld', //路由名称，
      component: HelloWorld //对应的组件模板
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi
    }
  ]
})

View Code

2.1.四、router-link制做导航

如今经过在地址栏改变字符串地址，已经能够实现页面内容的变化了。这并不知足需求，咱们须要的是在页面上有个像样的导航连接，咱们只要点击就能够实现页面内容的变化。制做连接须要标签，咱们先来看一下它的语法。

<router-link to="/">[显示字段]</router-link>

to：是咱们的导航路径，要填写的是你在router/index.js文件里配置的path值，若是要导航到默认首页，只须要写成 to=”/” ，
[显示字段] ：就是咱们要显示给用户的导航名称，好比首页新闻页。

明白了router-link的基本语法，咱们在 src/App.vue文件中的template里加入下面代码，实现导航。

<div>
  <router-link to="/">首页</router-link>|
  <router-link to="/hi">Hi页面</router-link>
</div>

如今咱们访问页面，发现已经多出了导航。

总结：这节课咱们在vue-cli的构建下对vue-router有了一个基本的了解，学会了vue-router的核心文件的基本结构，学会了如何添加一个新的模板页面，还学会了用<router-link>标签设置导航。

2.二、vue-router配置子路由

咱们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那咱们这节课学习一会儿菜单的路由方式，也叫子路由。子路由的状况通常用在一个页面有他的基础模版，而后它下面的页面都隶属于这个模版，只是部分改变样式。咱们接着第一节课的实例，在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。

2.2.一、改造App.vue的导航代码

咱们须要先改造app.vue的导航代码，来实现基本的导航功能。咱们用标签增长了两个新的导航连接。

App.vue代码

<div>
  <router-link to="/">首页</router-link>|
  <router-link to="/hi">Hi页面</router-link>|
  <router-link to="/hi/hi1">Hi1页面</router-link>|
  <router-link to="/hi/hi2">Hi2页面</router-link>
</div>

这时候咱们再访问主页的时候导航栏就发生了变化。多出了两个自导航：Hi页面1 和 Hi页面2

2.2.二、改写components/Hi.vue页面

把Hi.vue改为一个通用的模板，加入<router-view>标签，给子模板提供插入位置。“Hi页面1” 和 “Hi页面2” 都至关于“Hi页面”的子页面，有点像继承关系。咱们在“Hi页面”里加入<router-view>标签。

components/Hi.vue,就是第5行的代码，其余代码不变。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "hi",
  data() {
    return {
      msg: "Hi, I am Hi page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2.2.三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

新建的模板和Hi.vue没有太多的差异，知识改变了data中message的值，也就是输出的结果不太同样了。

Hi1.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "hi1",
  data() {
    return {
      msg: "Hi, I am Hi1 page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View Code

Hi2.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: "hi2",
  data() {
    return {
      msg: "Hi, I am Hi2 page."
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

View Code

2.2.四、修改router/index.js代码

咱们如今导航有了，母模板和子模板也有了，只要改变咱们的路由配置文件就能够了。子路由的写法是在原有的路由配置下加入children字段。

children: [
  { path: '/', name: 'hi', component: Hi }, 
  { path: 'hi1', name: 'hi1', component: Hi1 },
  { path: 'hi2', name: 'hi2', component: Hi2 }
]

children字段后边跟的是个数组，数组里和其余配置路由基本相同，须要配置path和component。具体看一下这个子路由的配置写法。

import Vue from 'vue' //引入Vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' //引入根目录下的HelloWorld.vue组件
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'


Vue.use(Router) //Vue全局使用Router

export default new Router({
  routes: [ //配置路由，这里是个数组
    { //每个连接都是一个对象
      path: '/', //连接路径
      name: 'HelloWorld', //路由名称，
      component: HelloWorld //对应的组件模板
    },
    {
      path: '/hi',
      name: 'Hi',
      component: Hi,
 children: [ { path: '/', name: 'hi', component: Hi }, 
        { path: 'hi1', name: 'hi1', component: Hi1 }, 
        { path: 'hi2', name: 'hi2', component: Hi2 } ]
    }
  ]
})

须要注意的是，在配置路由文件前，须要先用import引入Hi1和Hi2。

总结：这节的内容在路由配置里常常用到，好比咱们做一个购物模块，购物模块里有不少相同的元素，咱们就会利用这种子路由的形式，先定一个父页面，而后再修改子页面。但愿这节课对你有帮助，其实子路由的步骤仍是有些繁琐的，因此但愿大家多练习几遍，可以彻底掌握。

2.一、vue-router如何参数传递

开发中，参数的传递是个最基本的业务需求。经过URL地址来传递参数是一个形式，这节课咱们就看看vue-router为咱们提供了那些传递参数的功能。咱们先想象一个基本需求，就是在咱们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（相似于面包屑导航）。

2.1.一、用`name`传递参数

前两节课一直出现name的选项，可是咱们都没有讲，这节课咱们讲name的一种做用，传递参数。接着上节课的程序继续编写。

两步完成用name传值并显示在模板里：

在路由文件 src/router/index.js 里配置name属性。

routes: [ //配置路由，这里是个数组
  { //每个连接都是一个对象
    path: '/', //连接路径
    name: 'HelloWorld', //路由名称，
    component: HelloWorld //对应的组件模板
  }]

模板里(src/App.vue)用 $route.name 的形势接收，好比直接在模板中显示：
```
<p>{{$route.name}}</p>
```

2.1.二、经过标签中的to传参

也许你也会觉的上边的传参很不正规，也不方便，其实咱们多数传参是不用name进行传参的，咱们用标签中的to属性进行传参，须要您注意的是这里的to要进行一个绑定，写成 :to 。

先来看一下这种传参方法的基本语法：

<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

这里的to前边是带冒号的，而后后边跟的是一个对象形势的字符串.

name：就是咱们在路由配置文件中起的name值。
params：就是咱们要传的参数，它也是对象形势，在对象里能够传递多个值。

了解基本的语法后，咱们改造一下咱们的src/App.vue里的标签,咱们把hi1页面的进行修改。

<router-link :to="{name:'hi1',params:{username:'进击的辣条'}}">Hi1页面</router-link>|

把src/reouter/index.js文件里给hi1配置的路由起个name,就叫hi1.

{ path: 'hi1', name: 'hi1', component: Hi1 },

最后在模板里(src/components/Hi1.vue)用$route.params.username进行接收.

{{$route.params.username}}

总结：今天咱们学习了两种传参的方法，通常会使用第二种方法。咱们经过学习也知道了name的用途，一种做用是传参，一种做用是在传参时起到名称做用。

2.二、单页面多路由区域操做

实际需求是这样的，在一个页面里咱们有2个以上<router-view>区域，咱们经过配置路由的js文件，来操做这些区域的内容。例如咱们在src/App.vue里加上两个<router-view>标签。咱们用vue-cli创建了新的项目，并打开了src目录下的App.vue文件，在<router-view>下面新写了两行<router-view>标签,并加入了些CSS样式。

<router-view name="left" style="float:left;width:50%;background-color:#ccc;height:300px;"></router-view>
<router-view name="right" style="float:right;width:50%;background-color:#c0c;height:300px;"></router-view>

如今的页面中有了三个标签，也就是说咱们须要在路由里配置这三个区域，配置主要是在components字段里进行。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi1,
        right:Hi2
      }
    },
    {
      path: '/Hi',
      name: 'HelloWorld',
      components: {
        default:HelloWorld,
        left:Hi2,
        right:Hi1
      }
    }
  ]
})

上边的代码咱们编写了两个路径，一个是默认的‘/’，另外一个是’/Hi’.在两个路径下的components里面，咱们对三个区域都定义了显示内容。定义好后，咱们须要在component文件夹下，新建Hi1.vue和Hi2.vue页面就能够了。

Hi1.vue

<template>
  <h2>{{msg}}</h2>
</template>

<script>
export default {
  data() {
    return {
      msg: "I am Hi1"
    };
  }
};
</script>

View Code

Hi2.vue

<template>
  <h2>{{msg}}</h2>
</template>

<script>
export default {
  data() {
    return {
      msg: "I am Hi2"
    };
  }
};
</script>

View Code

最后在App.vue中配置咱们的就能够了

<router-link to="/">首页</router-link> | 
<router-link to="/hi">Hi页面</router-link> |

2.三、vue-router 利用url传递参数

咱们以前已经学会传递参数，可是咱们这些老程序员的情怀仍是利用url来传值，由于咱们之前在先后端没有分开开发的时候，常常这样作。在实际开发也是有不少用URL传值的需求，好比咱们在新闻列表中有不少新闻标题整齐的排列，咱们须要点击每一个新闻标题打开不一样的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。

2.3.一、:冒号的形式传递参数

咱们能够在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。 -. 在配置文件里以冒号的形式设置参数。咱们在/src/router/index.js文件里配置路由。

{
  path: '/params/:newsId/:newsTitle',
  name: 'Params',
  component:Params
}

咱们须要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.因此咱们在路由配置文件里制定了这两个值。

在src/components目录下创建咱们params.vue组件，也能够说是页面。咱们在页面里输出了url传递的的新闻ID和新闻标题。

<template>
  <div>
    <h2>{{msg}}</h2>
    <p>新闻ID:{{$route.params.newsId}}</p>
    <p>新闻标题：{{$route.params.newsTitle}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "params pages"
    };
  }
};
</script>

在App.vue文件里加入咱们的标签。这时候咱们能够直接利用url传值了。
```
<router-link to="/params/aaa/bbb">Params</router-link>
```
咱们已经实现了以url方式进行传值，这在实际开发中常用，必须彻底了解。

2.3.二、正则表达式在URL传值中的应用

上边的例子，咱们传递了新闻编号，如今需求升级了，咱们但愿咱们传递的新闻ID只能是数字的形式，这时候咱们就须要在传递时有个基本的类型判断，vue是支持正则的。

加入正则须要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。

path:'/params/:newsId(\\d+)/:newsTitle',

加入了正则，咱们再传递数字以外的其余参数，params.vue组件就没有办法接收到。

2.四、vue-router 的重定向-redirect

开发中有时候咱们虽然设置的路径不一致，可是咱们但愿跳转到同一个页面，或者说是打开同一个组件。这时候咱们就用到了路由的从新定向redirect参数。

2.4.一、redirect基本重定向

咱们只要在路由配置文件中（/src/router/index.js）把原来的component换成redirect参数就能够了。咱们来看一个简单的配置。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'
import Params from '@/components/Params'

Vue.use(Router)

export default new Router({
  routes: [{
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/params/:newsId(\\d+)/:newsTitle',
      name: 'Params',
      component: Params
    },
    { path: '/goHome',
      redirect: '/' }
  ]
})

这里咱们设置了goHome路由，可是它并无配置任何component（组件），而是直接redirect到path:’/’下了，这就是一个简单的从新定向。

2.4.二、重定向时传递参数

咱们已经学会了经过url来传递参数，那咱们重定向时若是也须要传递参数怎么办？其实vue也已经为咱们设置好了，咱们只须要在ridirect后边的参数里复制重定向路径的path参数就能够了。可能你看的有点晕，咱们来看一段代码：

{
  path:'/params/:newsId(\\d+)/:newsTitle',
  component:Params
},{
  path:'/goParams/:newsId(\\d+)/:newsTitle',
  redirect:'/params/:newsId(\\d+)/:newsTitle'
}

已经有了一个params路由配置，咱们在设置一个goParams的路由重定向，并传递了参数。这时候咱们的路由参数就能够传递给params.vue组件了。参数接收方法和正常的路由接收方法同样。

2.五、alias别名的使用

上节学习了路由的重定向，我相信你们已经能够熟练使用redirect进行重定向了。使用alias别名的形式，咱们也能够实现相似重定向的效果。

首先咱们在路由配置文件里（/src/router/index.js），给上节课的Home路径起一个别名，aliasHi1。
```
{
  path: '/hi1',
  name: 'hi1',
  component: Hi1,
  alias:'/aliasHi1'
}
```
配置咱们的，起过别名以后，能够直接使用<router-link>标签里的to属性，进行从新定向。
```
<router-link to="/aliasHi1">aliasHi1</router-link>
```

2.5.一、redirect和alias的区别

redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
alias：URL路径没有别改变，这种状况更友好，让用户知道本身访问的路径，只是改变了<router-view>中的内容。

2.六、路由的过渡动画

在开发中有一种需求叫高端、大气、上档次。因此做为一个大前端有责任让你的程序开起来更酷炫。能够在页面切换时咱们加入一些动画效果，提高咱们程序的动效设计。这节课咱们就学习一下路由的过渡动画效果制做。

`2.6.一、<transition>`标签

想让路由有过渡动画，须要在<router-view>标签的外部添加 <transition> 标签，标签还须要一个name属性。

<transition name="fade">
  <router-view/>
</transition>

咱们在/src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade。

2.6.二、css过渡类名

组件过渡过程当中，会有四个CSS类名进行切换，这四个类名与transition的name属性有关，好比name=”fade”,会有以下四个CSS类名：

fade-enter:进入过渡的开始状态，元素被插入时生效，只应用一帧后马上删除。
fade-enter-active:进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
fade-leave:离开过渡的开始状态，元素被删除时触发，只应用一帧后马上删除。
fade-leave-active:离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。

从上面四个类名能够看出，fade-enter-active和fade-leave-active在整个进入或离开过程当中都有效，因此CSS的transition属性在这两个类下进行设置。

那咱们就在App.vue页面里加入四种CSS样式效果，并利用CSS3的transition属性控制动画的具体效果。代码以下：

.fade-enter {
  opacity:0;
}
.fade-leave{
  opacity:1;
}
.fade-enter-active{
  transition:opacity .5s;
}
.fade-leave-active{
  opacity:0;
  transition:opacity .5s;
}

上边的代码设置了改变透明度的动画过渡效果，可是默认的mode模式in-out模式，这并非咱们想要的。下面咱们学一下mode模式。

2.6.三、过渡模式mode

in-out:新元素先进入过渡，完成以后当前元素过渡离开。
out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

这节课只能算是一个简单的过渡入门，教会你们原理，若是想作出实用酷炫的过渡效果，你须要有较强的动画制做能力，咱们下节课继续学习动画的知识。

2.七、mode的设置和404页面的处理

在学习过渡效果的时候，咱们学了mode的设置，可是在路由的属性中还有一个mode。这节课咱们就学习一下另外一个mode模式和404页面的设置。

2.7.一、mode的两个值

histroy :当你使用 history 模式时，URL 就像正常的 url，例如 http://localhost:8080/params/100/bbb，也好看！
hash :默认’hash’值，可是hash看起来就像无心义的字符排列，不太好看也不符合咱们通常的网址浏览习惯。

2.7.二、404页面的设置

用户会常常输错页面，当用户输错页面时，咱们但愿给他一个友好的提示，为此美工都会设计一个漂亮的页面，这个页面就是咱们常说的404页面。vue-router也为咱们提供了这样的机制.

设置咱们的路由配置文件（/src/router/index.js）：
```
//...
import Error from '@/components/Error'
//...
{
  path: '*',
  component: Error
}, 
```
这里的path:’*’就是找不到页面时的配置，component是咱们新建的一个Error.vue的文件。

新建404页面
在/src/components/文件夹下新建一个Error.vue的文件。简单输入一些有关错误页面的内容。

<template>
  <div>
    <h2>{{ msg }}</h2>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "Error:404"
    };
  }
};
</script>

咱们在用<router-link>瞎写一个标签的路径。
```
<router-link to="/bbbbbb">我是瞎写的</router-link>
```
预览一下咱们如今的结果，就已经实现404页面的效果。

2.八、路由中的钩子

咱们知道一个组件从进入到销毁有不少的钩子函数，一样在路由中也设置了钩子函数。路由的钩子选项能够写在路由配置文件中，也能够写在咱们的组件模板中。咱们这节课就介绍这两种钩子函数的写法。

2.8.一、路由配置文件中的钩子函数

咱们能够直接在路由配置文件（/src/router/index.js）中写钩子函数。可是在路由文件中咱们只能写一个beforeEnter,就是在进入此路由配置时。先来看一段具体的代码

{
  path: '/params/:newsId(\\d+)/:newsTitle',
  name: 'Params',
  component: Params,
  beforeEnter:(to,from,next)=>{
    console.log('我进入了params模板');
    console.log(to);
    console.log(from);
    next();
  }
},

咱们在params路由里配置了bdforeEnter得钩子函数，函数咱们采用了ES6的箭头函数，须要传递三个参数。咱们并在箭头函数中打印了to和from函数。具体打印内容能够在控制台查看object。

三个参数：

to:路由将要跳转的路径信息，信息是包含在对像里边的。
from:路径跳转前的路径信息，也是一个对象的形式。
next:路由的控制参数，经常使用的有next(true)和next(false)。

2.8.二、写在模板中的钩子函数

在配置文件中的钩子函数，只有一个钩子-beforeEnter，若是咱们写在模板中就能够有两个钩子函数可使用：

beforeRouteEnter：在路由进入前的钩子函数。

beforeRouteLeave：在路由离开前的钩子函数。

export default {
  data() {
    return {
      msg: "params pages"
    };
  },
  beforeRouteEnter(to, from, next) {
    console.log("准备进入路由模板");
    next();
  },
  beforeRouteLeave(to, from, next) {
    console.log("准备离开路由模板");
    next();
  }
};

这是咱们写在params.vue模板里的路由钩子函数。它能够监控到路由的进入和路由的离开，也能够轻易的读出to和from的值。

2.九、编程式导航

这是这篇文章的最后一节，前10节课的导航都是用<router-link>标签或者直接操做地址栏的形式完成的，那若是在业务逻辑代码中须要跳转页面咱们如何操做？这就是咱们要说的编程式导航，顾名思义，就是在业务逻辑代码中实现导航。

router.go(-1) 表明着后退，咱们可让咱们的导航进行后退，而且咱们的地址栏也是有所变化的。

咱们先在app.vue文件里加入一个按钮，按钮并绑定一个goback( )方法。
```
<button @click="goback">后退</button>
```

在咱们的script模块中写入goback()方法，并使用this.$router.go(-1),进行后退操做。

<script>
export default {
  name: "App",
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

打开浏览器进行预览，这时咱们的后退按钮就能够向之前的网页同样后退了。

router.go(1) :表明着前进，用法和后退同样，我在这里就不重复码字了（码字辛苦但愿你们理解）。

this.$router.push(‘/xxx ‘) 这个编程式导航都做用就是跳转，好比咱们判断用户名和密码正确时，须要跳转到用户中心页面或者首页，都用到这个编程的方法来操做路由。

咱们设置一个按钮，点击按钮后回到站点首页。

先编写一个按钮，在按钮上绑定goHome( )方法。
```
<button @click="goHome">回到首页</button>
```

在<script>模块里加入goHome方法，并用this.$router.push(‘/’)导航到首页

<script>
export default {
  name: "App",
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    goHome() { this.$router.push("/"); }
  }
};
</script>

三、vuwx

vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性须要共享给其余vue组件使用的部分，就叫作状态。简单的说就是data中须要共用的属性。好比：咱们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。若是咱们不把这些属性设置为状态，那每一个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有不少共用的数据，因此尤大神给咱们提供了vuex。

官网：https://vuex.vuejs.org/zh/

3.一、vuex小Demo

3.1.一、引入vuex

先使用vuecli建立项目，而后利用npm包管理工具，进行安装 vuex。在控制命令行中输入下边的命令就能够了
```
npm n install vuex --save
```
须要注意的是这里必定要加上 –save，由于你这个包咱们在生产环境中是要使用的。
新建一个vuex文件夹（这个不是必须的），并在文件夹下新建store.js文件，文件中引入咱们的vue和vuex。
```
import Vue from 'vue';
import Vuex from 'vuex';
```
使用咱们vuex，引入以后用Vue.use进行引用。
```
Vue.use(Vuex);
```
经过这三步的操做，vuex就算引用成功了，接下来咱们就能够尽情的玩耍了。

3.1.二、入门小Demo

咱们这个小案例先声明一个state的count状态，在页面中使用显示这个count，而后能够利用按钮进行加减，若是你看过个人文章，你必定知道，在咱们学基础知识的时候常常编写这个程序。

如今咱们store.js文件里增长一个常量对象。store.js文件就是咱们在引入vuex时的那个文件。
```
const state={
    count:1
}
```
用export default 封装代码，让外部能够引用。
```
export default new Vuex.Store({
    state
})
```

新建一个vue的模板，位置在components文件夹下，名字叫count.vue。在模板中咱们引入咱们刚建的store.js文件，并在模板中用{{$store.state.count}}输出count 的值。

<template>
  <div>
    <h2>{{ msg }}</h2>
    <hr>
    <h3>{{$store.state.count}}</h3>
    <div>
      <button @click="$store.commit('add')">+</button>
      <button @click="$store.commit('reduce')">-</button>
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store'

export default {
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  store
}
</script>

在store.js文件中加入两个改变state的方法。
```
const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}
```
这里的mutations是固定的写法，意思是改变的，咱们到时候会用一节课专门讲这个mutations，因此你先不用着急，只知道咱们要改变state的数值的方法，必须写在mutations里就能够了。
在count.vue模板中加入两个按钮，并调用mutations中的方法。
```
<div>
    <button @click="$store.commit('add')">+</button>
    <button @click="$store.commit('reduce')">-</button>
</div>
```
这样进行预览就能够实现对vuex中的count进行加减了。

3.二、state访问状态对象

在第1节咱们已经写了一个 const state ，这个就是咱们说的访问状态对象，它就是咱们SPA（单页应用程序）中的共享值。今天咱们主要学习状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给咱们模板里data中的值。咱们有三种赋值方式，咱们一个一个来学习一下。

3.2.一、经过computed的计算属性直接赋值

computed属性能够在输出前，对data中的值进行改变，咱们就利用这种特性把store.js中的state值赋值给咱们模板中的data值。

computed:{
    count(){
        return this.$store.state.count;
    }
}

这里须要注意的是return this.$store.state.count这一句，必定要写this，要不你会找不到$store的。这种写法很好理解，可是写起来是比较麻烦的，那咱们来看看第二种写法。

3.2.二、经过mapState的对象来赋值

咱们首先要用import引入mapState。

import {mapState} from 'vuex';

而后还在computed计算属性里写以下代码：

computed:mapState({
  count:state=>state.count
})

这里咱们使用ES6的箭头函数来给count赋值。

3.2.三、经过mapState的数组来赋值

computed:mapState(["count"])

这个算是最简单的写法了，在实际项目开发当中也常常这样使用。

3.三、Mutations修改状态

上节咱们学习了怎么样读取state，那咱们接下来学习一下怎么样修改状态。这个常量咱们在第一节课的时候也碰到过，而且进行了加减的操做。那这节课咱们就具体学习一下，如何操做Mutations。

3.3.一、$store.commit( )

Vuex提供了commit方法来修改状态，咱们粘贴出第一节课的代码内容，简单回顾一下，咱们在button上的修改方法。

<button @click="$store.commit('add')">+</button>
<button @click="$store.commit('reduce')">-</button>

store.js文件：

const mutations={
    add(state){
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

3.3.二、传值

这只是一个最简单的修改状态的操做，在实际项目中咱们经常须要在修改状态时传值。好比上边的例子，是咱们每次只加1，而如今咱们要经过所传的值进行相加。其实咱们只须要在Mutations里再加上一个参数，并在commit的时候传递就就能够了。咱们来看具体代码：

如今store.js文件里给add方法加上一个参数n。

const mutations={
    add(state,n){
        state.count+=n;
    },
    reduce(state){
        state.count--;
    }
}

在Count.vue里修改按钮的commit( )方法传递的参数，咱们传递10，意思就是每次加10.

<p>
   <button @click="$store.commit('add',10)">+</button>
   <button @click="$store.commit('reduce')">-</button>
</p>

这样两个简单的修改咱们就完成了传值，咱们能够在浏览器中实验一下了。

3.3.三、模板获取Mutations方法

实际开发中咱们也不喜欢看到$store.commit( )这样的方法出现，咱们但愿跟调用模板里的方法同样调用。

例如：@click=”reduce” 就和没引用vuex插件同样。

要达到这种写法，只须要简单的两部就能够了：

在模板count.vue里用import 引入咱们的mapMutations：
```
import {mapState,mapMutations} from 'vuex';
```
在模板的<script>标签里添加methods属性，并加入mapMutations
```
methods:mapMutations(['add','reduce'])
```
经过上边两部，咱们已经能够在模板中直接使用咱们的reduce或者add方法了，就像下面这样。
```
<button @click="reduce">-</button> 
```

3.四、getters计算过滤操做

getters从表面是得到的意思，能够把他看做在获取数据以前进行的一种再编辑,至关于对数据的一个过滤和加工。你能够把它看做store.js的计算属性。

3.4.一、getters基本用法

好比咱们如今要对store.js文件中的count进行一个计算属性的操做，就是在它输出前，给它加上100.

咱们首先要在store.js里用const声明咱们的getters属性。

const getters = {
    count:function(state){
        return state.count +=100;
    }
}

写好了gettters以后，咱们还须要在Vuex.Store()里引入，因为以前咱们已经引入了state盒mutations，因此引入里有三个引入属性。代码以下，

export default new Vuex.Store({
    state,mutations,getters
})

在store.js里的配置算是完成了，咱们须要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性，若是你写多个，只有最后一个computed属性可用，因此要对上节课写的computed属性进行一个改造。改造时咱们使用ES6中的展开运算符”…”。.

computed:{
    ...mapState(["count"]),
    count(){
        return this.$store.getters.count;
    }
},

须要注意的是，你写了这个配置后，在每次count 的值发生变化的时候，都会进行加100的操做。

3.4.二、用mapGetters简化模板写法.

咱们都知道state和mutations都有map的引用方法把咱们模板中的编码进行简化，咱们的getters也是有的，咱们来看一下代码。

首先用import引入咱们的`mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

computed:{
  ...mapState(["count"]),
  // count(){
  //   return this.$store.getters.count;
  // }
  ...mapGetters(["count"])
},
methods:mapMutations(['add','reduce'])

3.五、actions异步修改状态

actions和以前讲的Mutations功能基本同样，不一样点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不作太多解释了，若是你不懂本身去百度查一下吧。

3.5.一、在store.js中声明actions

actions是能够调用Mutations里的方法的，咱们仍是继续在上节课的代码基础上进行学习，在actions里调用add和reduce两个方法。

const actions ={
    addAction(context){
        context.commit('add',10)
    },
    reduceAction({commit}){
        commit('reduce')
    }
}

在actions里写了两个方法addAction和reduceAction，在方法体里，咱们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不同。

context：上下文对象，这里你能够理解称store自己。
{commit}：直接把commit对象传递过来，可让方法体逻辑和代码更清晰明了。

3.5.二、模板中的使用

咱们须要在count.vue模板中编写代码，让actions生效。咱们先复制两个之前有的按钮，并改为咱们的actions里的方法名，分别是：addAction和reduceAction。

<p>
  <button @click="addAction">+</button>
  <button @click="reduceAction">-</button>
</p>

改造一下咱们的methods方法，首先仍是用扩展运算符把mapMutations和mapActions加入。

methods:{
    ...mapMutations([  
        'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
},

你还要记得用import把咱们的mapActions引入才可使用。

import {mapState,mapMutations,getters, mapGetters, mapActions} from 'vuex';

3.5.三、增长异步检验

咱们如今看的效果和咱们用Mutations做的如出一辙，确定有的小伙伴会好奇，那actions有什么用，咱们为了演示actions的异步功能，咱们增长一个计时器（setTimeOut）延迟执行。在addAction里使用setTimeOut进行延迟执行。

const actions={
    addAction(context){
        context.commit('add',10);
        setTimeout(()=>{context.commit('reduce')},2000);
        console.log("我比reduce先执行了");
    },
    reduceAction(commit){
        commit('reduce')
    }
}

咱们能够看到在控制台先打印出了‘我比reduce提早执行’这句话。

3.六、module模块组

随着项目的复杂性增长，咱们共享的状态愈来愈多，这时候咱们就须要把咱们状态的各类操做进行一个分组，分组后再进行按组编写。那今天咱们就学习一下module：状态管理器的模块组操做。

3.6.一、声明模块组

在vuex/store.js中声明模块组，咱们仍是用咱们的const常量的方法声明模块组。代码以下：

const moduleA={
    state,mutations,getters,actions
}

声明好后，咱们须要修改原来 Vuex.Stroe里的值：

export default new Vuex.Store({
    modules:{a:moduleA}
})

3.6.二、在模板中使用

如今咱们要在模板中使用count状态，要用插值的形式写入。

<h3>{{$store.state.a.count}}</h3>

若是想用简单的方法引入，仍是要在咱们的计算属性中rutrun咱们的状态。写法以下：

computed:{
    count(){
        return this.$store.state.a.count;
    }
},

1. Vue全家桶-vuex
2. Vue全家桶之——Vuex
3. Vue全家桶 vue + vue-router + vuex
4. vue全家桶（vue-cli, vue-router, axios, vuex）
5. VUE全家桶之vuex的使用
6. Vue全家桶
7. vue全家桶
8. Vue 全家桶
9. VUE全家桶
10. vue全家桶和react全家桶
更多相关文章...
• ASP.NET MVC - 安全 - ASP.NET 教程
• Docker 命令大全 - Docker教程
• Tomcat学习笔记（史上最全tomcat学习笔记）
• 使用阿里云OSS+CDN部署前端页面与加速静态资源

Vue全家桶（Vue-cli、Vue-route、vuex）

摘要

一、Vue-cli

1.一、安装vue-cli

1.二、初始化项目

1.3.一、重要文件讲解

1.3.二、webpack配置相关

1.3.三、.babelrc

1.3.四、.editorconfig

1.4解读Vue-cli的模板

1.4.1npm run build 命令

1.4.二、main.js文件解读

1.4.三、App.vue文件

1.4.五、router/index.js 路由文件

1.4.六、HelloWorld.vue文件解读

二、Vue-router

2.一、Vue-router入门

2.1.一、安装vue-router

2.1.二、解读router/index.js文件

2.1.三、增长一个Hi的路由和页面

2.1.四、router-link制做导航

2.二、vue-router配置子路由

2.2.一、改造App.vue的导航代码

2.2.二、改写components/Hi.vue页面

2.2.三、在components目录下新建两个组件模板 Hi1.vue 和 Hi2.vue

2.2.四、修改router/index.js代码

2.一、vue-router如何参数传递

2.1.一、用name传递参数

2.1.二、经过 标签中的to传参

2.二、单页面多路由区域操做

2.三、vue-router 利用url传递参数

2.3.一、:冒号的形式传递参数

2.3.二、正则表达式在URL传值中的应用

2.四、vue-router 的重定向-redirect

2.4.一、redirect基本重定向

2.4.二、重定向时传递参数

2.五、alias别名的使用

2.5.一、redirect和alias的区别

2.六、路由的过渡动画

2.6.一、<transition>标签

2.6.二、css过渡类名

2.6.三、过渡模式mode

2.七、mode的设置和404页面的处理

2.7.一、mode的两个值

2.八、路由中的钩子

2.8.一、路由配置文件中的钩子函数

2.8.二、写在模板中的钩子函数

2.九、编程式导航

三、vuwx

3.一、vuex小Demo

3.1.一、引入vuex

3.1.二、入门小Demo

3.二、state访问状态对象

3.2.一、经过computed的计算属性直接赋值

3.2.二、经过mapState的对象来赋值

3.2.三、经过mapState的数组来赋值

3.三、Mutations修改状态

3.3.一、$store.commit( )

3.3.二、传值

3.3.三、模板获取Mutations方法

3.四、getters计算过滤操做

3.4.一、getters基本用法

3.4.二、用mapGetters简化模板写法.

3.五、actions异步修改状态

3.5.一、在store.js中声明actions

3.5.二、模板中的使用

3.5.三、增长异步检验

3.六、module模块组

3.6.一、声明模块组

3.6.二、在模板中使用

2.1.一、用`name`传递参数

2.1.二、经过标签中的to传参

`2.6.一、<transition>`标签