1. 程式人生 > 實用技巧 >vue全家桶-vuex

vue全家桶-vuex

1、Vuex概述

Vuex是實現元件全域性資料管理的一種機制,可以方便的實現各個元件之間的資料共享問題

偷了一張圖

# 左邊的圖是沒有使用vuex的時候:
	這個時候我們元件之間如果需要傳遞資料的話,那麼在模組多的情況下,傳遞關係錯綜複雜,難以維護。
# 右邊的圖是使用vuex的時候:
	這個時候我們元件之間如果需要傳遞資料的話,那麼在不管模組多少,共享資料都是通過vuex的store來進行存取,這樣就統一管理了我們的共享資料,便於資料的管理和後期維護。

使用vuex的好處

# 1、能夠集中的管理元件之間的共享資料,易於開發和後期維護
# 2、vuex中儲存的資料都是響應式的,能夠實時保持資料與頁面的同步

什麼樣的資料適合存在vuex中

	只有元件之間必須要共享的資料才適合存在vuex中,例如身份驗證的token,那麼這個就要存在vuex中,那麼例如一個表格的資料,那麼這種就不適合存在vuex中。
	以前看過別人的部落格,我記得很清楚的一句話:**不要因為要用vuex而去用vuex**。

2、Vuex的配置

# 1、安裝vuex
	npm install vuex --save
# 2、匯入vuex
	import Vuex from 'vuex';
# 3、使用vuex
	Vue.use(Vuex);
# 4、建立Store物件
	/* Vuex */
    const store = new Vuex.Store({
      state:{count: 0} // state中存放的就是共享的資料
    })
# 5、將Store物件掛載到Vue例項上,那麼所有元件中就都可以使用Store物件
		new Vue({
          el: '#app',
          router,
          components: { App },
          template: '<App/>',
          store:store
        })
    當然我們的store:store這個後面的可以忽略

3、Vuex的核心概念

4、Vuex的案例