log 頁面開發 nbsp 狀態 問題 都是 多個 有一個 出現

1、什麽是vuex? 　　　　公共狀態管理；解決多個非父子組件傳值麻煩的問題 　　　　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}){     //這個參數是個對象，解構賦值拿到對象中的commit
                      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的數據是響應式的 所以組件的狀態也會發生改變

vuex的安裝和基本使用