vuex

  vuex狀態管理工具      1.什麼是Vuex：             Vuex是一個專為Vue.js應用程式開發的狀態管理模式。     2.使用Vuex的原因：             當我們遇到多個元件共享狀態時，多層元件的傳值非常繁瑣，不利於維護，因此我們把元件的共享狀態抽取出來，以一個單例模式管理，在這種模式下，不管在哪個元件都可以獲取狀態或觸發行為     3.什麼情況下使用：             <1>雖然Vuex可以幫助我們管理共享狀態，但是也附帶了更多的概念和框架，增加了學習成本，所以決定是否要使用Vuex要對短期和長期效益進行權衡。             <2>如果應用夠簡單，最好不要使用Vuex；如果需要構建一箇中大型單頁應用，可以考慮使用Vuex去更好的再元件外部管理狀態。   4.如何使用Vuex：             <1>每一個Vuex應用的核心就是store（倉庫），它包含著應用中大部分的狀態（state）,store是記憶體機制，而不是快取機制，當前頁面一旦重新整理揮著通過路由跳轉亦或是關閉，都會導致store初始化。             <2>Vuex的核心概念分別是：                     （1）State: 存放基本資料   ----輔助函式mapState: 當一個元件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重複和冗餘。為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵。                     （2）getters：是從store中的state派生出來的狀態，專門來計算state中的資料，相當於state中資料的計算屬性  ---輔助函式mapGetters輔助函式: mapGetters 輔助函式僅僅是將 store 中的 getters 對映到區域性計算屬性，與state類似                    （3）actions:  是專門操作非同步請求的資料和業務邏輯的地方，它不能直接變更state中的狀態，而是通過commit來呼叫mutations裡的方法來改變state裡的資料。 ---輔助函式mapActions 將組建的methods對映為store.dispath呼叫                     （4）mutations：提交mutions是更改Vuex中的狀態的唯一方法。mutations必須是同步的，如果要非同步需要使用actions。每一個mutations都有一個字串作為第一個引數，提交載荷作為第二個引數。 ---輔助函式mapMutations 將組建中的methods對映為store.commit呼叫。                     （5）Moules：使用單一狀態樹，導致應用的所有狀態幾種到一個很大的物件，但是，當應用變得很大時，store物件會變得臃腫不堪，為了解決以上問題，Vuex允許我們將store分割到模組（modules）。每個模組擁有自己的state、mutations、avtions、grtters。             <3>若要改變state裡的資料，則通過actions使用comiit來呼叫mutations裡的方法進而改變state裡的資料。   1.安裝vuex:    npm i vuex --save     也是單向資料流的， （專案）用到vuex 在專案中管理資料  管理的哪些資料       建立倉庫  new Vuex.Store   存資料   {             state:{                 n:555               }           } 取資料  this.$store.state.變數   改資料  mutations(同步操作)        修改資料的方法發到mutations裡面(state,引數)         修改資料的方法有兩個引數，第一個state,第二個自定義（增或減）。     呼叫mutations裡面的方法         this.$

store.commit("mutations裡面的方法名",引數) getters store中的計算屬性 actions 放非同步操作的  this.$store.dispatch("actions方法名") vuex 狀態管理工具 （狀態即資料） 中英倉庫，可供任何元件使用，存取 state 狀態 資料 dispatch 派遣分發 1.建立一個倉庫 2.把資料存到倉庫裡面去 3.在倉庫裡取出資料 4.安裝vuex:    npm i vuex --save     也是單向資料流的， commit  指派、委託、遵守 mutations 操作變化 元件從倉庫中拿資料，同時元件可以提交一個非同步請求，發生一個非同步動作，非同步動作發生後，通過同步的修改，將資料修改掉，之後資料傳給元件     Vuex store 基本使用 1.專案中安裝 vuex  :    npm install vuex --save 2.src下新建 store 資料夾，新建index.js，相當於一個數據倉庫   3.main.js中操作 在mian.js中註冊了 store 元件，在全域性就可以直接呼叫其方法         2.App中接收，且渲染（元件中調取資料） 在元件中呼叫其資料 第一種方式：在模板中使用{{ $store.state.n }} 第二種方式：在export default {     使用計算屬性，實時監控     computed:{         n( ){                 return  this.$store.state.n           }     } } 使用：在外掛中{{n}}可以直接取到值

相關推薦