一. vuex的總結
1. 手動配置
1)目錄結構如下
2)store/index.js的設置
引入vue和vuex,Vue.use(Vuex);創建Vuex實例,const store = new Vuex.Store({})
3)在main.js中掛載store
2. store實例中的方法
1)state:用于存放公共數據。在其他.vue文件中調用使用this.$store.state.屬性/方法名。
2)mutations:用于提交state中的數據,它是唯一能改變state中數據的途徑,但只能是同步操作。通過在mutations中寫方法,在.vue文件中的methods中調用this.$store.commit('方法名')提交數據,或者在actions中直接commit('數據'),actions的方法中必須要有{commit}形參。
3)actions:類似于vue里的methods,其函數用于處理異步操作以及一些業務邏輯。通過在actions中寫方法,在.vue文件中的methods中調用this.$store.dispatch('方法名',要傳入的數據)提交數據。
4)getters:類似于vue中的computed,同時也是監聽屬性的變化,當state中的屬性發生改變的時候就會觸發getters里面的方法,用于獲取state中的數據,getters也可以操作數據進行改變。在.vue文件中調用this.$store.getters.方法名。
3. vuex中的輔助函數
1)mapState:將state屬性映射到computed上。
2)mapGetters:將getters屬性映射到computed上。
3)mapMutations:將mutations屬性映射到methods上。
4)mapActions:將actions屬性映射到actions上。
所有輔助函數的接收方式都有兩種,數組和對象(推薦對象)。
注意:使用mapActions時,要事先在methods中寫好觸發的函數
4. 模塊modules
按照模塊劃分
? ? ? 1)每個模塊相當于一個小型的vuex
? ? ? 2)每個模塊中都會有state,mutations,?actions,?getters,?modules
? ? ? 3)!切記再到處模塊的時候,加上namespaced:?true?主要作用時將每個模塊都有獨立命名空間。
二. Quasar的學習
1. Quasar的簡單安裝
在已vue create 文件名 的文件中,導航到新創建的項目文件夾并添加cli插件
cd my-app? ? ? ? ?vue add quasar
回車之后會詢問你是否希望插件替換某些現有文件,若是第一次安裝,則可以進行替換,明了quasar的結構,一邊快速開發應用程序;若是多次開發,則可以不進行替換。
成功安裝之后,會出現src/quasar.js文件,具體如下:
然后就可以根據quasar提供的組件一一引進到quasar.js文件后再進行使用。
例如QBtn的使用,先在quasar中import,再在components注冊QBtn。