vue.js和vue-router和vuex快速上手知識

一直以來，認為vue相比react而言，學習成本會更低，會更簡單，但最近真正接觸後，發現vue的各方面都有做一些客戶化的優化，有一些亮點，但也有一些很不順手的地方，沒有react的靈活度，但卻有ng的方便性。要說vue和react哪個更適合做移動端，其實沒有絕對的答案，喜歡就好。我希望能通過這篇文章能讓大家迅速上手vue的全家桶。

本文的例子源碼托管在github上，地址是https://github.com/tianxiangbing/vue-demo

首先，我們用vue-cli搭一個vue的開發環境，目前vue-cli3.0也出來了，但使用者不多，中文文檔也較少，更多配置都是vue.config.js里，這裡配置是返回一個module,也是修改webpack的配置項，但其實還是很麻煩，這個不在本文主題內，省過...

1. 服務的搭建

安裝vue-cli，建議安裝2.x的版本，本文使用的是vue-cli3.0

npm install -g vue-cli

創建一個vue的項目，項目名稱叫vue-demo

vue create vue-demo

然後進入項目目錄下執行安裝依賴包

npm i

然後啟動服務，執行命令 npm run serve ,你應該可以看到如下的結果：

看到這裡，就算成功了，在瀏覽器中打開http://localhost:8080/ ，就可以看到vue整個頁面了，並且已經是熱部署了，可以實時編譯更新了。

 2. vue-router路由

vue的基礎知識可以直接參考https://cn.vuejs.org/v2/guide/ ，基本上跟react沒有什麼共通性，也跟ng不同，如果說一定要更像誰一點的話，應該是更像ng一些。知識點很多， 磨刀不誤殺人功，所以建議先讀官方教程，如果不想看教程，也沒關係，其實用的時候再看也一樣^_^

先安裝vue-router依賴

npm install --save vue-router

然後修改main.js文件，引入vue-router，在這裡提一點，官方的例子基本上是引入外部js文件的方式，所以跟實際開發還是有一點點的區別，實際開發中，都是以多模塊的方式引用組件，所以我們儘量以簡單又實用的方式來使用。

import VueRouter from "vue-router";
import Home from './pages/Home';
import Hello from './pages/Hello';
import User from './pages/User';

我在這裡引用了vue-router，並且在pages里創建了三個組件頁面。頁面的代碼類似於下麵：

<template>
  <div>
    我是hello的頁面.
  </div>
</template>

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

然後在main.js里配置路由地址，並且在vue的實例化中使用它。

let router = new VueRouter({
  mode: "history",//預設是hash方式
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/hello',
      component: Hello
    },
    { path: '/user/:id', component: User },
    { path: '/vuex', component: Vuex1 }
  ]
});
new Vue({
  router,　　//es6寫法，相當於router:router
  render: h => h(App)
}).$mount('#app')

恩，這裡順便演示瞭如何帶參數:id的方式，這與其他框架一樣，獲取參數的方式是： $route.params.id ,更多的配置可以參考vue-router官方文檔，本文只講最基礎的入門知識。運行起來，效果大概是這樣的

 好了，vue-router我們就算會了。完美~

接著我們要講vue全家桶里最複雜也是最重要的一環，vuex

3. vuex的使用

vuex這個東西是個啥呢，其實用過redux或flux的都知道，就是個單向數據流，嗯....，就是個觀察者模式，嗯....，就是事件分發，嗯....其實說得這麼懸忽，就是為了提高它的逼格，用正常來說，他就是個全局的數據對象，然後你需要通過action來修改它，然後它的改動會派發到所有影響的組件。這樣就可以兄弟叔侄組件通信了。

安裝vuex依賴

npm install --save vuex 

然後我們如官方例子一樣做個點擊加數的demo。

import Vuex from 'vuex';
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
    ,minus(state){
      state.count--;
    }
  },
  actions:{
    increment(context){
      context.commit('increment')
    },
    minusAsync({commit}){//es6簡單寫法
      setTimeout(()=>{
        commit('minus')
      },4000)
    }
  }
});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

這麼一長段的代碼，怎麼理解呢，state就是存儲狀態的，mutations這個就類似於redux的reducer，就是實際操作state的方法，另外我們需要通過action來提交這個mutations,方法就是commit，我們還記得redux里還有個actionType，這裡我直接寫的字元串。註意，在這裡我用了一個setTimeout來測試延時的操作。

然後我們在需要使用到vuex的地方這樣調用

import { mapActions } from 'vuex'
export default {
  computed: {
    count () {
      return this.$store.state.count
    }
  },
  methods:{
      add(){
        //   this.$store.dispatch('increment');
        this.increment();
      },
      minus(){
          this.$store.dispatch('minusAsync');
      },
      ...mapActions(['increment'])
  }
}

首先第一行引入的mapActions是幫助把action代理到當前this下麵的一種捷徑， this.$store.dispatch('increment'); 簡寫成了 this.increment(); 通過這樣定義後，我們把methods綁定到相應的按鈕事件里，整個計數器的功能就算開發完了

  <div>
      計數器：
      {{count}}
      <button  v-on:click="add">點+</button>
      <button  v-on:click="minus">點-</button>
  </div>

這樣看來，確實比react-redux上手更快了，只要我們再劃分下模塊，就可以立馬開發一個vue+vue-router+vuex的應用了。

本文的例子源碼托管在github上，地址是https://github.com/tianxiangbing/vue-demo  如果有任何的疑問或問題可以提出來，大家都是成年人，有什麼不能說呢~