一. vuex的總結

1. 手動配置

1）目錄結構如下

目錄結構

2）store/index.js的設置

引入vue和vuex，Vue.use(Vuex)；創(chuàng)建Vuex實例，const store = new Vuex.Store({})

store實例化的基本格式

3）在main.js中掛載store

2. store實例中的方法

1）state：用于存放公共數(shù)據(jù)。在其他.vue文件中調用使用this.$store.state.屬性/方法名。

2）mutations：用于提交state中的數(shù)據(jù)，它是唯一能改變state中數(shù)據(jù)的途徑，但只能是同步操作。通過在mutations中寫方法，在.vue文件中的methods中調用this.$store.commit('方法名')提交數(shù)據(jù)，或者在actions中直接commit('數(shù)據(jù)')，actions的方法中必須要有{commit}形參。

3）actions：類似于vue里的methods，其函數(shù)用于處理異步操作以及一些業(yè)務邏輯。通過在actions中寫方法，在.vue文件中的methods中調用this.$store.dispatch('方法名',要傳入的數(shù)據(jù))提交數(shù)據(jù)。

4）getters：類似于vue中的computed，同時也是監(jiān)聽屬性的變化，當state中的屬性發(fā)生改變的時候就會觸發(fā)getters里面的方法，用于獲取state中的數(shù)據(jù)，getters也可以操作數(shù)據(jù)進行改變。在.vue文件中調用this.$store.getters.方法名。

3. vuex中的輔助函數(shù)

1）mapState：將state屬性映射到computed上。

2）mapGetters：將getters屬性映射到computed上。

3）mapMutations：將mutations屬性映射到methods上。

4）mapActions：將actions屬性映射到actions上。

所有輔助函數(shù)的接收方式都有兩種，數(shù)組和對象（推薦對象）。

computed中的兩個輔助函數(shù)

methods中的兩個輔助函數(shù)

注意：使用mapActions時，要事先在methods中寫好觸發(fā)的函數(shù)

數(shù)組的接收方式

數(shù)組的接收方式

4. 模塊modules

按照模塊劃分

? ? ? 1）每個模塊相當于一個小型的vuex

? ? ? 2）每個模塊中都會有state，mutations,?actions,?getters,?modules

? ? ? 3）!切記再到處模塊的時候，加上namespaced:?true?主要作用時將每個模塊都有獨立命名空間。

示例

二. Quasar的學習

1. Quasar的簡單安裝

在已vue create 文件名 的文件中，導航到新創(chuàng)建的項目文件夾并添加cli插件

cd my-app? ? ? ? ?vue add quasar

回車之后會詢問你是否希望插件替換某些現(xiàn)有文件，若是第一次安裝，則可以進行替換，明了quasar的結構，一邊快速開發(fā)應用程序；若是多次開發(fā)，則可以不進行替換。

成功安裝之后，會出現(xiàn)src/quasar.js文件，具體如下：

相關自有配置

然后就可以根據(jù)quasar提供的組件一一引進到quasar.js文件后再進行使用。

例如QBtn的使用，先在quasar中import，再在components注冊QBtn。