網(wǎng)站前端開(kāi)發(fā)技術(shù)vue一騎絕塵，成為前端開(kāi)發(fā)的首選語(yǔ)言，比傳統(tǒng)前端、react更加受人喜歡，對(duì)于開(kāi)發(fā)系統(tǒng)級(jí)別的應(yīng)用是非常適合使用vue的，開(kāi)發(fā)企業(yè)站等邏輯簡(jiǎn)單的網(wǎng)站，考慮到SEO和維護(hù)成本，可能還是使用傳統(tǒng)的前端適合。今天方維網(wǎng)絡(luò)給大家介紹vue中非常重要的vuex.

什么是vuex呢？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

大家都知道vue是前后端分離的，我們傳統(tǒng)開(kāi)發(fā)中，可以使用后端的session來(lái)存儲(chǔ)token、用戶名等信息，那么如果前后端分離了，就不能使用后端的session了，那么怎么辦呢？解決辦法就是vuex，相當(dāng)于后端的更高級(jí)版的session.

vuex狀態(tài)管理以下部分：

state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將 state 映射到視圖；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。

他們的關(guān)系如下圖
 

vuex存在的必要性

vue的data保存的state只能當(dāng)前頁(yè)面有效，子組件或者其他頁(yè)面則無(wú)效，如果有一些狀態(tài)如token、登錄信息、權(quán)限等需要全局同步的狀態(tài)則實(shí)現(xiàn)不了，那么這時(shí)候就需要使用vuex.

vuex怎么安裝呢？

很簡(jiǎn)單，使用命令

npm install vuex --save 
或者
yarn add vuex

程序代碼中引入方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


使用簡(jiǎn)單示例


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment (state) { state.count++ } }
})

現(xiàn)在，你可以通過(guò) store.state 來(lái)獲取狀態(tài)對(duì)象，以及通過(guò) store.commit 方法觸發(fā)狀態(tài)變更：
store.commit('increment')

使用起來(lái)還是可以靈活多變，具體大家可以慢慢研究。