代碼管理

每天早上更新一下代碼git pull

vuex的學(xué)習(xí)

vuex的了解
Vuex是一個專門為vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。

狀態(tài)管理模式，包括以下幾個部分
state：驅(qū)動應(yīng)用程序的數(shù)據(jù)源
view：以聲明的方式將state映射到視圖
actions:響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化

image.png

每一個Vuex應(yīng)用的核心及時store（倉庫）。store基本上就是一個容器，它包含著你的應(yīng)用中大部分的狀態(tài)（state）。

store.state來獲取狀態(tài)對象，以及通過store.commit方法觸發(fā)狀態(tài)變更

通過提交 mutation 的方式，而非直接改變 store.state.count，是因?yàn)槲覀兿胍鞔_地追蹤到狀態(tài)的變化

mapState輔助函數(shù)
大概使用：

computed:mapState({
    count:state => state.count
})

store.state.orderList 映射this.orderList

store對象的使用
store.state.count

vuex通過store選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個子組件中（需要調(diào)用vue.use(Vuex)）:

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})

通過根實(shí)例中注冊store選項(xiàng)，該store實(shí)例會注入到根組件下的所有的子組件中，而且子組件能夠通過this.$store訪問到

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}

個人理解：store中的state相當(dāng)于vue實(shí)例中的data，store中的getter相當(dāng)于vue實(shí)例中的一個computed

mutation
更改Vuex的store中的狀態(tài)的唯一方法就是提交mutation。
要喚醒一個mutation handler，你需要以相應(yīng)的type調(diào)用store.commit方法
store.commit('increment')

每個mutation都有一個字符串的事件類型（type）和一個回調(diào)函數(shù)（handler）

可以使用常量替代Mutation事件類型

mutation一定要是同步函數(shù)

vue的響應(yīng)規(guī)則

1.最好提前在你的store中初始化好所有的屬性
2.添加新屬性的時候，使用Vue.set(obj,'newProp',123)或者以老對象替換老對象，對象擴(kuò)展符 state.obj = { ...state.obj, newProp: 123 }

action
Action函數(shù)接受一個與store實(shí)例具有相同方法和屬性的context對象，因此你可以調(diào)用context.commit提交一個mutation，或者通過context.state和context.getters來獲取state和getters

Action通過store.dispatch方法觸發(fā)
store.dispatch('increment')

個人理解：
dispatch——>action——>mutation——>state——>view

之所以使用store.dispatch，是因?yàn)閙utation必須同步，但是要在action執(zhí)行異步操作的時候，就需要用到store.dispatch

個人理解：組件中computed中的狀態(tài)，通過mapGetters映射到store中的數(shù)據(jù)的狀態(tài)。
組件中methods中的方法，通過mapActions映射到store中暴露出去的事件

箭頭函數(shù)

箭頭函數(shù)

全局注冊

全局注冊組件

使用components進(jìn)行局部注冊

局部注冊組件

slot
具名插槽

具名插槽

作用域插槽
注意，在父級中，具有特殊特性的slot-scope的template元素必須存在，表示它是作用域插槽的模板。slot-scope的值作為一個臨時變量名，此變量接受從子組件傳遞過來的prop對象。

作用域插槽

父組件與子組件之間的通信
子傳父
使用$emit和$on

父傳子
通過prop
slot

父組件怎么使用到子組件的方法呢？可以使用ref指定組件ID，然后在父組件中拿到子組件，進(jìn)而操作子組件的方法