Vuex的詳解和基本使用介紹

前言:

在進行真正介紹Vuex時先給大家引入一個基本的概念:狀態管理器。何爲狀態管理器,簡單的來說就是把你需要的數據(一般是所用的共享數據)放到一個存儲裏,簡化自己的業務邏輯的操作。


Vuex的簡介:

Vuex是實現組件之間全局狀態(數據)管理機制,可以方便的實現組件的數據之間共享。

舉個例子:

組件之間傳值,如果直接是父子組件之間傳值,那就很簡單了,直接用屬性綁定,然後子組件用props接受就行。子組件傳遞父組件數據直接用子組件調用父組件的方法用$emit()就可以,但是如果跨組件傳值就比較麻煩了,如果從傳統的方法,一層層的傳值,這必然很麻煩也容易出錯。上圖可能更容易理解。

如上圖:

左面的圖就是普通的傳值。右面的圖就是Vuex。明顯看出來兩者差別。右面Store就是存儲數據的,如果組件之間的數據傳遞都可以放到Store裏,需要的時候就可以從Store取。


Vuex的優點:

①:能夠Vuex集中管理共享數據,易於開發和後期維護。

②:能夠高效的實現組件間的數據共享,提高開發效率。

③:存儲在Vuex中數據都是響應式的,能夠保持與頁面數據同步時時更新(類似於v-model)


Vuex的使用:

①:安裝vuex依賴包

npm install vuex --save

②:導入vuex包

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

③:創建store對象

const store = new Store({})

④:掛載到Vue實例上


Vuex中幾個常見屬性簡單介紹:

state:提供公共數據源,所有的共享數據都要保存到state中

mutations:是對state中數據修改的唯一一個合法的途徑,在這裏我們可以定義自己的方法修改數據。

actions:是對數據進行異步操作的時候進行在這裏定義自己的方法然後間接地調用mutations裏的方法實現數據的修改。

getters:可以在對state中的數據進行封裝,然後得到你想要的數據。


下面給大家介紹各個屬性的怎樣使用:

state:(兩種方式)

①:方式一

②:方式二

mutations:(兩種方式)

①:方式一

②:方式二

actions:(兩種方式)

①:方式一

②:方式二

getters:(兩種方式)

①:方式一

②:方式二


結尾:

分享:

從來沒有做過賊,卻想偷個幸福給你!從來沒有坑過人,卻想騙個快樂給你!從來沒有害過誰,卻想拐個開心給你!從來沒有賴過誰,卻想搶個平安給你!x你一生一世,爭取這些壞事都盡力!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章