一、Vuex (全局變量管理~~多個頁面共享數據)

✿ 更詳細的可以看官網：開始 | Vuex

1、什么是Vuex？

2、核心概念：

(1) state：保存共享的狀態（全局變量）

(2) getters（類似計算屬性）

(3) mutations：(類似於事件注冊) Vuex的store狀態的更新唯一方式：提交Mutation

1）Mutation主要包括兩部分：

2）使用：

3）提交載荷（Payload）：就是mutations回調函數的參數（可以是基本變量，也可以是對象）：

4）提交風格：

5）使用常量替代 Mutation 事件類型：

6）在組件中提交 Mutation（簡化方法的調用代碼）：使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用

(4) actions（異步操作）：actions提交的對象是 mutation，而不是直接變更狀態state：

1）Action 函數有一個與 store 實例具有相同方法和屬性的 context 對象，

2） Action作用：

3）使用：

4）提交載荷（Payload）---actions和mutations的回調函數的參數：

5）Action返回Promise對象，將異步操作后的結果返回給vue實例method中定義分發的函數。

6）在組件中分發 Action（簡化方法的調用代碼）： mapActions 輔助函數將組件的 methods 映射為 store.dispatch

(5) modules（模塊化）：

一、Vuex (全局變量管理~~多個頁面共享數據)

　　　　　　　　　　　✿ 更詳細的可以看官網：https://vuex.vuejs.org/zh/guide/

const store = new Vuex.Store({
  state: {
      count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態
      state.count++
    }
  }
})

//提交mutations
this.$store.commit('increment', 10)

vue 實例中定義的method方法中：通過 this.$store.commit('increment'),
 其中這個 'increment' 就是咱定義在store的mutitions中的回調函數名

//注冊increment事件
mutations: {
  increment (state, n) {
    state.count += n
  }
}

//提交mutations
this.$store.commit('increment', 10)

//注冊increment事件
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

//提交mutations
this.$store.commit('increment', {
  amount: 10
})

//注冊一個increment的action，並通過context提交個mutations
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
//寫法一：直接書寫context對象    
    increment (context) {
      context.commit('increment')
    }
//寫法二：直接書寫context對象需要用到的屬性或方法    
    increment ({commit}) {
      commit('increment')
    }
  }
})