Vuex

Vuex是什么？

概念：專門在vue中實現集中式狀態（數據）管理的一個Vue插件，對Vue應用中多個組件的共享狀態進行集中式的管理(讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信

搭建Vuex環境

1. 下載安裝vuex 使用命令： npm i vuex
2. 創建src/store/index.js該文件用于創建Vuex中最為核心的 store（store是文件）

Vuex Github地址

$bus.$on('getX',回調)
$bus.$emit('updateX',數據)

使用Vuex組件

什么時候使用Vuex

1. 多個組件依賴于同一狀態
2. 來自不同組件的行為需要變更同—狀態

---

1. 引入Vuex【store/index.js】

import Vuex from 'vuex'

2. 注冊Vuex插件

Vue.use(Vuex)

3. 準備三個組件 actions mutations state

準備actions–用于響應組件中的動作
const actions = {}
準備mutations–用于操作數據（state)
const mutations = {}
準備state–用于存儲數據
const state = {}

4. 創建并暴露store

	export default new Vuex.Store({actions,mutations,state})

總結：

使用Vuex編寫

• Vuex的基本使用

1．初始化數據state，配置actions .mutations，操作文件store.js

1. 讀取vuex中的數據
   $store.state.數據名
2. 修改vuex中的數據 action方法 / mutations方法
   $store.dispatch( 'action中的方法名',數據)
$store.commit( 'mutations中的方法名',數據)

commit方法

getters 配置項

概念：當state 中的數據需要經過加工后再使用時，可以使用 getters 加工，相當于全局計算屬性在store.js 中追加getters配置

引入全局計算屬性 getters

	const getters = {bigSum(state){return state.sum *10}}//創建并暴露storeexport default new Vuex.Store({getters})

【src/index.js】

組件中讀取數據

	$store.getters.bigSum

【文件內讀取數據 Xxx.vue】

map方法

1. mapState方法：用于幫助映射state中的數據為計算屬性
   
2. mapGetters方法：用于幫助映射getters 中的數據為計算屬性
   
   √ 3. ** mapActions方法：用于幫助生成與actions對話的方法，即包含$store.dispatch(xxx)的函數**
   
   √ 4. mapMutations方法：用于幫助生成與mutations對話的方法，即包含
   $store.commit(xxx)的函數
   
   注意: mapActions 與mapMutations使用時
   若需要傳遞參數需要：在模板中綁定事件時傳遞好參數 否則參數是事件對象