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+webpack2.0+vuex+vue

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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>`標籤