vuex介紹和vuex數據傳輸流程

1、什么是vuex?

　　　　公共狀態管理；解決多個非父子組件傳值麻煩的問題；簡單說就是多個頁面都能用Vuex中store公共的數據

　　　　a、並不是所有的數據都要放在Vuex中，只有各個組件公用的一些數據會放在Vuex當中

　　　　b、Vuex是一個公共狀態管理模式 並不是數據庫 所以不可能持久保存一些數據

　　　　　　當用戶刷新瀏覽器的時候那么數據就有可能消失

　　　　c、Vuex主要應用在大型的單頁面開發中

2、vuex的特點

　　　　1、遵循單向數據流

　　　　2、Vuex中的數據是響應式的 

3、vuex的流程圖：

　　

4、vuex的具體使用：

　　　　一、 使用vuex：

　　　　　　1、安裝： yarn add vuex

　　　　　　2、使用插件（創建倉庫）： 存放所有組件內的數據（傳的值）

　　　　　　　　　　新建index.js:　

　　　　　　　　　　import Vue from "vue";
                import Vuex from "vuex";
                import axios from "axios";     
                Vue.use(Vuex);
                const store = new Vuex.store({
                    //配置項（vuex中5個屬性，這里只說三個）
                    //公共倉庫，儲存數據
                    state：{
                      n:10
                    },
                    //處理異步函數和業務邏輯，里面的參數都是函數
                    actions:{

                    },
                    //主要用來修改state中的數據
                    mutations:{

                    }
                })
                export default store;

 

　　　　　　3、將倉庫掛載到vue的實例身上：

　

 main.js：
                  import store from "./store/";
                  new Vue({
                    el: '#app',
                    router,
                    store,
                    components: { App },
                    template: '<App/>'
                  })
                  //掛載完成后，vue實例中增加了$store,即可通過this.$store來訪問store對象的各種屬性和方法
                  這個可以拿到store中數據，就可以在組件中進行頁面的渲染  {{this.$store.state.n}}  //100

 --->state--->components

 　　　　二、vuex數據傳遞流程：

 如果組件中想要修改state中數據的值：

                                    <template>
                                      <div class="hello">
                                        <h2>home</h2>
                                        <h3>{{this.$store.state.n}}</h3>
                                        <button @click="handleClick()">修改</button>
                                      </div>
                                    </template>
                  你可能會想到在methods:{}中寫handleClick函數修改，但這樣是不行的。
                  原因：違反了vuex單向數據流的特點。 在當前組件中修改公共倉庫state的值后，所有組件頁面上的值都改變了，
                        如果程序出現錯誤，錯誤會無法捕獲。
                        所以要遵循vuex的特點數據傳遞流程進行修改。

 

 

---> components--->actions   
            
                methods：{
                  handleClick(){
                    this.$store.dispatch("handleAdd")   //通過dispatch調用actions里的方法
                  }
                }
                actions:{
                  handleAdd(){
                    console.log("actions里的方法被調用了")
                  }
                }

 

---> actions ---> mutations

                actions:{
                  handleAdd({commit}，params){     //第一個參數是個對象，解構賦值拿到對象中的commit；第二個參數是傳遞給mutations的參數
                      commit("handlMutationseAdd")   //通過commit調用 mutations里的方法
                  }
                }
                mutations:{
                      handlMutationseAdd(state,params){     //vuex中state屬性   params：commit觸發時，傳遞過來的數據
                      console.log("mutations被調用了",params)
                      state.n++;
                      console.log(state.n)  
                      }                          
                }
                到此組件修改state中的數據完成，點擊一次修改按鈕n加1
                接着頁面上的數據重新進行了渲染----符合了vuex的特點數據是響應式的

 5、總結下vuex數據傳輸流程

　　　　1、通過new Vuex.Store()創建一個倉庫 state是公共的狀態，state--->components渲染頁面

　　　　2、在組件內部通過this.$store.state.屬性 來調用公共狀態中的state，進行頁面的渲染。

　　　　3、當組件需要修改數據的時候，必須遵循單向數據流。通過this.$store.dispatch來觸發actions中的方法

　　　　4、actions中的每個方法都會接受一個對象 這個對象里面有一個commit方法，用來觸發mutations里面的方法

　　　　5、mutations里面的方法用來修改state中的數據 mutations里面的方法都會接收到2個參數 一個是store中的state

　　　　　 另外一個是需要傳遞到參數

　　　　6、當mutations中的方法執行完畢后state會發生改變，因為vuex的數據是響應式的 所以組件的狀態也會發生改變