vuex和vue-router是vue生態系統中的很重要的兩個工具

vuex 是vue用來管理數據狀態的一種機制，將Vue中所有的狀態（數據）抽離出來進行統一管理，一般來說，如果不是大型單頁項目，像SPA這些，也是不會去使用vuex的，畢竟vue是一個輕量級的框架，啟動快是它的特點，所以vue的優化就有很大的一點是盡可能的減少依賴數量，達到優化加載速度。

? ? ? ? 首先就是引入vuex，一種是直接引入vuex.js的文件，以script標簽引入，另一種是利用npm install -g --dev全局安裝開發時依賴，安裝完依賴之后就是引入vuex模塊，

import Vuex from "vuex"

import Vue from "vue"

之后通過顯示的調用vuex

Vue.use(Vuex)

創建實例store

? ? const? store? = new Vuex.store({

? ? ? ? state:{},

? ? ? ? getters:{}.

? ? ? ? mutatios:{},

????????actions:{}

}),

我們還要在vue實例中去引入，注入store

? ? ? ? new? Vue({

? ? ? ? store:store

})

vuex屬性：state ：{}存放數據的集合；getters：{}，通過對state里面數據的操作，進而改變數據的狀態，一般會使用數組迭代方法map()，filter()等，功能類似于vue實例中的computed計算屬性，但他還有一個重要作用，在后面映射到vue實例的時候，這個后面再講。

? ? ? ? mutations：{}這個集合可以直接操作state里面的內容，可直接對state的數據狀體進行操作，重要的是，在該集合內只能進行同步操作，不允許異步操作，也就是說，在mutations里面不能進行ajax或asnyc和await等操作，要進行這些操作我們在Actions:{}里面。這里會傳入一個參數state(作為第一個參數，所以亦可以傳入其他的參數，稱為載荷Payload)，就是上面的state集合，從這里對state數據進行操作

? ? ? ? Actions:{} 作用有點類似vue實例的methods：{}，存放各種方法的地方，唯有這里才能夠進行異步操作，但是這個集合不能直接對state里的數據進行改變。這里操作改變的是對象是mutations里的數據，這里使用的方法會自動引入一個參數context，通過context.commit("")來對數據的操作(喚醒mutations的handler)，該context對象具有和store實例的相同的方法和屬性，或者也可以使用context.state()或context.getters()，有時候我們也想使用actions里面的其他方法，我們就用context.dispatch("其他方法名") 進行觸發，之所以這么做，是因為actions可以異步執行，而mutations只能同步。

? ? ? ? 將vuex實例中actions的映射到methods：

????????將vuex實例中的mutations的映射到computed（可映射多個）:

? ? ? ? computed:{

? ? ? ? ? ? ...Vuex.mapMutations(["methods1","methods2"])

}

? ? ? ? 改變突變mutations，使用commit("mehtods");

當項目越寫也大的時候，一個store實例已經不夠用了，這時候就有一種module機制，將一個個store實例分成一個個模塊，然后將其暴露出來，

這時候vue實例里注入vuex就不那么寫了（注入之前要將module暴露export default，否則無效）

? ???????new? Vue({

????????module:{

? ? ? ? storeA:storeA,

?????????storeB:storeB,

?????????storeC:storeC

????????????}

????????});

Vue-Router ? vue的路由機制

大型單頁面的應用，當我們要跳轉到另一個不同的頁面時，使用a標簽跳轉是行不通的，只能使用路由，vue提供了一套完整的路由機制，以適應各種復雜的跳轉情況。

? ? ? ? 引入vue-router：

????????npm install vue-router

? ? ? ? 創建實例

? ? ? ? ? ? const router = new VueRouter({

routes:[{

? ? component:"component",

? ? path:"path",

? ? ? ? children:[{

? ? ? ? component:"myRouter",

? ? ? ? path:"/childrenpath"

}]

}]

});

目標路由的寫法：

var myRouter = {

? ? template:"<div></div>"

},

將路由注入到vue實例中：

new Vue（{

? ? el：“#app”，

? ? ? ? router:router

}）;

這樣一個簡單的路由實例就完成了，

接下就是路由的渲染：

<router-view></router-view> ?將這段代碼放在你需要加載路由的地方，路由就會完成渲染。

除此之外你還需要寫一段a標簽，將routes里的path放到a標簽的href屬性里，并在path之前加#/

或者直接寫<router-link to="path">路由</router-link> ?用于路徑導航，實現路由的注入。

二級路由：

? ????????<router-link to="path/path">二級路由<router-link>

? ? ? ? ? ? 同時將routes對象里的children子路由路徑path設為你的二級路由的路徑地址

渲染方式

將<view-router></view-router>插入一級路由的模板template下