vuex 講解

　　vuex 狀態的管理狀態，它採用集中式存儲管理應用的全部組件的狀態，尤爲是在中大型項目，則是很好的開發利器

　　vuex 的流程圖

　　

　　vuex 的優點：

　　　　1. vuex 的存儲狀態，響應式的

　　　　2. 他是全部組件狀態的集合

　　vuex 的四種狀態

　　state ：就是數據倉庫；也是咱們倉庫存放數據的地方

　　mutations：修改倉庫的數據，只能經過 commit 來向上傳遞

　　咱們組件若是想修改數據，正確的操做流程

　　1. 查看是同步仍是異步，是同步則，跳過 actions，直接從 mutations 中修改 state 的數據，這樣 state 倉庫的數據修改了以後，咱們才能正確的響應到組件上

　　因此，組件僅僅把事件提交給 mutations 就行了， 讓 vuex 的 mutations 的方法執行，

　　使用的方法，配合使用

　　　　組件vue 中想修改 vuex 中 state （倉庫）中的數據

　　　　this.$store.commit("jia",5)

　　　　vuex 中實例對象中 將 jia 方法的處理

　　　　mutations:{

　　　　　　jia(state,n){　　// state 就是倉庫，也是咱們修改數據的東西， n 就是第二個參數，表明5

　　　　　　　　console.log(state);

　　　　　　　　console.log(n);

　　　　　　}

　　　　}

　　第二種寫法：

　　　　this.$store.commit({

　　　　　　type:"jia",　　　　// type 決定了提交的事件名

　　　　　　cont:n　　　　　// 這個就是咱們組件向 vuex 中提交的數據　

　　　　})

　　mutations:{

　　　　jia(state,n){

　　　　　　console.log(state);　　// 就是咱們的 vuex 的倉庫

　　　　　　console.log(n);　　　//  n 就是提交的對象　

　　　　}

　　}

　　actions：若是咱們涉及到異步的提交數據，那就只能從 actions 開始，到 mutations 而後才能修改 state 中的數據，最後渲染到 vue 的組件上

　　若是咱們不這樣操做，雖然咱們的數據因響應式的也能夠正常的渲染頁面，可是咱們的 vuex 的倉庫 state ，卻不能正常的顯示

　　操做步驟：

　　vue 的組件上，咱們的提交方式

　　this.$store.dispatch('jia',5)；

　　// 對咱們 vuex 的實例上的創建一個倉庫，放一個數據

　　state:{

　　　　cont:0

　　}

　　而後咱們能夠在 vuex 的實例上對異步的處理，在 actions 上

　　actions:{

　　　　jia(store,n){

　　　　　　console.log(store)　　// 就是，vuex 的實例

　　　　　　console.log(n)　　// 就是咱們傳輸的數據

　　　　　　// 在這裏咱們進行異步處理

　　　　　　setTimeout(()=>{

　　　　　　　　store.commit('jia',n)　　// 咱們異步處理完了，而後咱們提交到 mutations 上來對 倉庫上的 state 來進行修改

　　　　　　},2000)

　　　　}

　　}

　　mutations:{

　　　　jia(state,n){

　　　　　　state.cont++

　　　　}

　　}

　　咱們還有對象的第二種寫法，與 mutations 提交的對象寫法一致

　　getters:{

　　　　doublecount(){

　　　　　　return conts+10;

　　　　}　　// 返回值就是 doublecount 的 return 值

　　}

　　moudel 模塊，

　　思想：就是將咱們寫在一塊兒的東西，分開，好比 state 倉庫的數據，咱們可使用 es6 的模塊化開發，來引入別的模塊的數據，先達到文件分離的目的

　　咱們還可使用 module 對象，來使咱們的倉庫分離，只是 state 倉庫中的數據不同，但別的東西都同樣

　　寫法如圖：

　　　　vue 組件

　　　　

　　　　vuex 的寫法