vuex工作工作原理（寫給自己看的筆記以加深自己的理解）

一、Vuex工作原理

首先我們先來了解下Vuex：

????? 1芒划、概念

? ? ? 在vue中實現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個Vue插件穿剖，對Vue應(yīng)用中多個組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫）蚤蔓，也是一種組件間通信的方式，且適用于任意組件間通信糊余。

? ? ? 2秀又、何時使用单寂？

? ? ? 多個組件需要共享數(shù)據(jù)時

現(xiàn)在開始進(jìn)入vuex的世界！

當(dāng)多組件需要共用一組數(shù)據(jù)時候 最好的做法就是使用Vuex

需要共享的數(shù)據(jù)存儲在State中涮坐，里面可以存放許許多多的功用數(shù)據(jù)

從左側(cè)Vue Components出發(fā) 調(diào)用 dispath函數(shù) 可傳入兩個參數(shù) dispath('要調(diào)用的方法名',要傳入的值)

調(diào)用dispatch之后 就來到了Action? Action中一定有個與之對應(yīng)的方法在這邊觸發(fā) 在這個方法里會調(diào)用commit函數(shù) 同時原封不動的把dispatch帶過來的參數(shù)-------{ mutation('要調(diào)用的方法名',要傳入的值) } ---------給到Mutation

在Mutation中一定會有個我們帶過來的方法名 這里mutation的這個函數(shù)中 會拿到兩個東西----->一個是所有state中存儲的數(shù)據(jù)凄贩，一個就是我們一些傳入進(jìn)來的值??? 在這個函數(shù)中我們只需要寫我們希望傳入進(jìn)來的值做怎樣的操作（希望這個值做出怎樣的改變）也就是最終寫邏輯的地方

這里可能會疑惑 既然commit做的工作與dispath工作相同 為什么多此一舉這一步？袱讹？疲扎？

下面來解答一下：

在Action中我們可以進(jìn)行一些有條件的操作，比如我們傳入的值需要從后端服務(wù)器獲取捷雕，那么就必須走action椒丧， 又比如我們要使 點擊一個按鈕一個數(shù)字增加 當(dāng)是奇數(shù)的時候不加 偶數(shù)增加 這個也是條件 ！就要走action這個邏輯救巷。

如果我們只是簡單的執(zhí)行一個沒有任何條件的動作 可以省去dispath走到action這一步壶熏。直接commit與Mutation對話！

說到這里我們 我們大概能明白Action浦译、Mutation棒假、State這一套工作流程就是Vuex的工作 他們由store統(tǒng)一管理 所以當(dāng)我們?nèi)フ{(diào)用API的時候 要寫為store.dispatch()、store.commit()

但是需要注意的是 我們要讓所有的組件實例對象vc都能看的到store 因為這些方法不是存放在window上的精盅。接下來我們?nèi)ゴ罱ㄒ幌聉uex的工作環(huán)境帽哑。

二、搭建Vuex工作環(huán)境

1叹俏、第一步安裝

???? npm i vuex

2妻枕、第二步使用vuex

????? 在入口文件main.js中使用下vuex

?????? 先引入vuex

??????? import vuex from 'vuex'

?????? 使用vuex

??? Vue.use(vuex)

完成這兩步之后，我們就可以在vm中創(chuàng)建store配置項粘驰，如果不先完成以上兩步屡谐，直接在vm中創(chuàng)建store配置項會報錯！

在vm中：store:store??? 可以直接簡寫為store

到這里所有的組件實例對象上都多了個$store???

寫到這里最核心的內(nèi)容來了蝌数。愕掏。。顶伞。store管理著Action饵撑、Mutation、State 還有dispatch和commit兩個API

我需要去創(chuàng)建一個store來完成這一步枝哄！

3肄梨、創(chuàng)建store文件

?????? 創(chuàng)建：src/store/index.js

? ? ? ? //引入vue核心庫

? ? ? ? import Vue from 'vue'

? ? ? ? //引入vueX

? ? ? ? import Vuex from 'vuex'

? ? ? ? //應(yīng)用插件

? ? ? ? Vue.use(Vuex)

? ? ? ? //準(zhǔn)備actions對象--響應(yīng)組件中用戶的動作

? ? ? ? const actions = {}

? ? ? ? //準(zhǔn)備mutatins對象--修改state中的數(shù)據(jù)

? ? ? ? const mutations = {}

? ? ? ? //準(zhǔn)備state對象--保存具體的數(shù)據(jù)

? ? ? ? const state = {}

? ? ? ? //創(chuàng)建并暴露store

? ? ? ? export default new Vuex.Store({

? ? ? ? ? actions,

? ? ? ? ? mutations,

? ? ? ? ? state

? ? ? ? })????? 創(chuàng)建好store文件后要去入口文件main.js中引入一下

這邊寫完之后可能會報一個錯誤 這是由于import引入文件引起的 報錯的原因就是先引入了store 后使用了vuex 并且調(diào)換編寫順序也是不可行的 因為import會自動提升到最上方

解決方法：

在入口文件main.js中去引入vue阻荒。然后使用vuex 就可以解決這個問題