Vue全家桶（Vue-cli、Vue-route、vuex）
摘要
学习本篇之前要具备一定的vue基础知识，可以先看一下Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1、Vue-cli
Vue-cli是vue官方出品的快速构建单页应用的脚手架，这里牵扯的东西很多，有webpack，npm，nodejs，babel等等。
官网：https://cli.vuejs.org/guide/
GitHub：https://github.com/vuejs/vue-cli
1.1、安装vue-cli
首先要安装 npm , npm 的安装在基础视频中有。npm没有问题，接下来我们可以用npm 命令安装vue-cli了，在命令行输入下面的命令：
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安装到我们的计算机里了。\
如果想使用2.X版本的命令来创建项目，则可以执行以下命令
npm install -g @vue/cli-init # `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
1.2、初始化项目
我们用 vue init 命令来初始化项目，具体看一下这条命令的使用方法。
vue init <template-name> <project-name>
init ：表示我要用vue-cli来初始化项目
<template-name> ：表示模板名称，vue-cli官方为我们提供了5种模板
<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.3、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.1、重要文件讲解
- 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.2、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.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.4、.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.2、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.3、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.5、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.6、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是一个重点学习任务。
2、Vue-router
简介： 由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。
有的小伙伴会有疑虑，为什么我们不能像原来一样直接用<a></a>标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，你必须使用vue-router来进行管理。
2.1、Vue-router入门
2.1.1、安装vue-router
vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。
npm install vue-router --save-dev
如果你安装很慢，也可以用cnpm进行安装，如果你在使用vue-cli中已经选择安装了vue-router，那这里不需要重复安装了。
2.1.2、解读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.3、增加一个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功力一下子就提升了一个档次。为了方便小伙伴查看，贴出现在的路由配置文件:
View Codeimport 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 } ] })
2.1.4、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.2、vue-router配置子路由
我们上节课初步了解Vue-router的初步知识，也学会了基本的跳转，那我们这节课学习一下子菜单的路由方式，也叫子路由。子路由的情况一般用在一个页面有他的基础模版，然后它下面的页面都隶属于这个模版，只是部分改变样式。我们接着第一节课的实例，在Hi页面的下面新建两个子页面，分别是 “Hi页面1” 和 “Hi页面2”，来实现子路由。
2.2.1、改造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.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.3、在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>
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>
2.2.4、修改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.1、vue-router如何参数传递
开发中，参数的传递是个最基本的业务需求。通过URL地址来传递参数是一个形式，这节课我们就看看vue-router为我们提供了那些传递参数的功能。我们先想象一个基本需求，就是在我们点击导航菜单时，跳转页面上能显示出当前页面的路径，来告诉用户你想在所看的页面位置（类似于面包屑导航）。
2.1.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.2、通过 标签中的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、单页面多路由区域操作
实际需求是这样的，在一个页面里我们有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>
Hi2.vue
<template>
<h2>{{msg}}</h2>
</template>
<script>
export default {
data() {
return {
msg: "I am Hi2"
};
}
};
</script>
最后在App.vue中配置我们的就可以了
<router-link to="/">首页</router-link> | <router-link to="/hi">Hi页面</router-link> |
2.3、vue-router 利用url传递参数
我们之前已经学会传递参数，但是我们这些老程序员的情怀还是利用url来传值，因为我们以前在前后端没有分开开发的时候，经常这样做。在实际开发也是有很多用URL传值的需求，比如我们在新闻列表中有很多新闻标题整齐的排列，我们需要点击每个新闻标题打开不同的新闻内容，这时在跳转路由时跟上新闻编号就十分实用。
2.3.1、:冒号的形式传递参数
我们可以在理由配置文件里以:冒号的形式传递参数，这就是对参数的绑定。 -. 在配置文件里以冒号的形式设置参数。我们在/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.2、正则表达式在URL传值中的应用
上边的例子，我们传递了新闻编号，现在需求升级了，我们希望我们传递的新闻ID只能是数字的形式，这时候我们就需要在传递时有个基本的类型判断，vue是支持正则的。
加入正则需要在路由配置文件里（/src/router/index.js）以圆括号的形式加入。
path:'/params/:newsId(\\d+)/:newsTitle',
加入了正则，我们再传递数字之外的其他参数，params.vue组件就没有办法接收到。
2.4、vue-router 的重定向-redirect
开发中有时候我们虽然设置的路径不一致，但是我们希望跳转到同一个页面，或者说是打开同一个组件。这时候我们就用到了路由的重新定向redirect参数。
2.4.1、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.2、重定向时传递参数
我们已经学会了通过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.5、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.1、redirect和alias的区别
- redirect：仔细观察URL，redirect是直接改变了url的值，把url变成了真实的path路径。
- alias：URL路径没有别改变，这种情况更友好，让用户知道自己访问的路径，只是改变了
<router-view>中的内容。
2.6、路由的过渡动画
在开发中有一种需求叫高端、大气、上档次。所以作为一个大前端有责任让你的程序开起来更酷炫。可以在页面切换时我们加入一些动画效果，提升我们程序的动效设计。这节课我们就学习一下路由的过渡动画效果制作。
2.6.1、<transition>标签
想让路由有过渡动画，需要在<router-view>标签的外部添加 <transition> 标签，标签还需要一个name属性。
<transition name="fade"> <router-view/> </transition>
我们在/src/App.vue文件里添加了<transition>标签，并给标签起了一个名字叫fade。
2.6.2、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.3、过渡模式mode
in-out:新元素先进入过渡，完成之后当前元素过渡离开。out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。
这节课只能算是一个简单的过渡入门，教会大家原理，如果想做出实用酷炫的过渡效果，你需要有较强的动画制作能力，我们下节课继续学习动画的知识。
2.7、mode的设置和404页面的处理
在学习过渡效果的时候，我们学了mode的设置，但是在路由的属性中还有一个mode。这节课我们就学习一下另一个mode模式和404页面的设置。
2.7.1、mode的两个值
-
histroy :当你使用
history模式时，URL 就像正常的 url，例如 http://localhost:8080/params/100/bbb，也好看！ -
hash :默认’hash’值，但是hash看起来就像无意义的字符排列，不太好看也不符合我们一般的网址浏览习惯。
2.7.2、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.8、路由中的钩子
我们知道一个组件从进入到销毁有很多的钩子函数，同样在路由中也设置了钩子函数。路由的钩子选项可以写在路由配置文件中，也可以写在我们的组件模板中。我们这节课就介绍这两种钩子函数的写法。
2.8.1、路由配置文件中的钩子函数
我们可以直接在路由配置文件（/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.2、写在模板中的钩子函数
在配置文件中的钩子函数，只有一个钩子-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.9、编程式导航
这是这篇文章的最后一节，前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>
3、vuwx
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。比如：我们有几个页面要显示用户名称和用户等级，或者显示用户的地理位置。如果我们不把这些属性设置为状态，那每个页面遇到后，都会到服务器进行查找计算，返回后再显示。在中大型项目中会有很多共用的数据，所以尤大神给我们提供了vuex。
3.1、vuex小Demo
3.1.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.2、入门小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.2、state访问状态对象
在第1节我们已经写了一个 const state ，这个就是我们说的访问状态对象，它就是我们SPA（单页应用程序）中的共享值。今天我们主要学习状态对象赋值给内部对象，也就是把stroe.js中的值，赋值给我们模板里data中的值。我们有三种赋值方式，我们一个一个来学习一下。
3.2.1、通过computed的计算属性直接赋值
computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。
computed:{ count(){ return this.$store.state.count; } }
这里需要注意的是return this.$store.state.count这一句，一定要写this，要不你会找不到$store的。这种写法很好理解，但是写起来是比较麻烦的，那我们来看看第二种写法。
3.2.2、通过mapState的对象来赋值
我们首先要用import引入mapState。
import {mapState} from 'vuex';
然后还在computed计算属性里写如下代码：
computed:mapState({ count:state=>state.count })
这里我们使用ES6的箭头函数来给count赋值。
3.2.3、通过mapState的数组来赋值
computed:mapState(["count"])
这个算是最简单的写法了，在实际项目开发当中也经常这样使用。
3.3、Mutations修改状态
上节我们学习了怎么样读取state，那我们接下来学习一下怎么样修改状态。这个常量我们在第一节课的时候也碰到过，并且进行了加减的操作。那这节课我们就具体学习一下，如何操作Mutations。
3.3.1、$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.2、传值
这只是一个最简单的修改状态的操作，在实际项目中我们常常需要在修改状态时传值。比如上边的例子，是我们每次只加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.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.4、getters计算过滤操作
getters从表面是获得的意思，可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。
3.4.1、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.2、用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.5、actions异步修改状态
actions和之前讲的Mutations功能基本一样，不同点是，actions是异步的改变state状态，而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了，如果你不懂自己去百度查一下吧。
3.5.1、在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.2、模板中的使用
我们需要在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.3、增加异步检验
我们现在看的效果和我们用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.6、module模块组
随着项目的复杂性增加，我们共享的状态越来越多，这时候我们就需要把我们状态的各种操作进行一个分组，分组后再进行按组编写。那今天我们就学习一下module：状态管理器的模块组操作。
3.6.1、声明模块组
在vuex/store.js中声明模块组，我们还是用我们的const常量的方法声明模块组。代码如下：
const moduleA={ state,mutations,getters,actions }
声明好后，我们需要修改原来 Vuex.Stroe里的值：
export default new Vuex.Store({ modules:{a:moduleA} })
3.6.2、在模板中使用
现在我们要在模板中使用count状态，要用插值的形式写入。
<h3>{{$store.state.a.count}}</h3>
如果想用简单的方法引入，还是要在我们的计算属性中rutrun我们的状态。写法如下：
computed:{ count(){ return this.$store.state.a.count; } },
-------------------------------------------
个性签名：独学而无友，则孤陋而寡闻。做一个灵魂有趣的人！
如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，博主在此感谢！
万水千山总是情，打赏一分行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主，哈哈哈(っ•̀ω•́)っ✎⁾⁾！
posted on 2019-03-05 09:11 一个大西瓜咚咚咚 阅读(37026) 评论(17) 编辑 收藏 举报
