1 組件

內置組件

內置組件內主要包含一些基礎的view button video scroll-view等內置基礎組件，滿足基礎場景

擴展組件

擴展組件是uniapp封裝了一些成品的組件，可以幫助開發者快速構建一些功能，節省時間。例如：日期選擇小組件等

2 vuex狀態管理

使用流程

1. 創建vuex js
2. 引入store存儲
3. 使用計算屬性 獲取狀態機當中的值

mapState 輔助函數

當一個組件需要獲取多個狀態的時候，都聲明成計算函數會有些重復和冗余。為了解決這個問題，我們可以使用mapState 輔助函數幫助我們生成計算屬性。

1. 第一種 在計算屬性中使用mapState構建一個對象形式的映射

    	computed: mapState({username: state => state.username,age: state => state.age})
   

2. 第二種 如果狀態機中的屬性和vue組件中的屬性名一致的情況下，也可以使用數組

    computed: mapState(['username','age'])
   

getters

getters 定義獲取狀態機中數據的輔助函數

訪問方式

• 導入store
  通過 store.getters.xxx 即可訪問該函數
• 直接通過this.$store.getters.xxx 就可以訪問getters提供的函數

Mutation

Vuex中store數據改變的唯一方式就是Mutation, 通常mutations 里面放置的都是改變store中數據提供的方法， 使數據和視圖分離

• Mutation定義

  // 頁面路徑：store/index.js
  import { createStore } from 'vuex'
  const store = createStore({state: {count: 1},mutations: {add(state) {// 變更狀態state.count += 2}}
  })
  export default store

• 觸發Mutation的函數

  <!-- 頁面路徑：pages/index/index.vue -->
  <template><view><view>數量：{{count}}</view><button @click="addCount">增加</button></view>
  </template>
  <script>
  import store from '@/store/index.js'
  export default {computed: {count() {return this.$store.state.count}},methods: {addCount() {store.commit('add')}}
  }
  </script>

當然 還可以對Mutation函數定義接收參數，在調用Mutation函數的時候可以進行相應的參數傳參操作。