1.介紹
vuex 被稱為一種“狀態管理模式”,這個狀態管理應用包含一下部分:
1.state 驅動應用的數據源(需進行共享的數據)。
2.view 以申明方式將state映射到視圖上。
3.actives 響應在view上的用戶輸入導致的狀態(數據)變化。(即用戶所執行的操作)。
狀態管理有5個核心,分別是state、getter、mutation、action以及module。
基于我們應用但是各種會遇到多個組件數據的共享狀態,單向數據流的簡潔性就會受到破壞。(data中的數據發生改變時,相應組件中所用到的相關數據也會發生相對于的改變。),如需解決此問題,可以用vuex來解決。
什么情況下我應該使用 Vuex?
Vuex 可以幫助我們管理共享狀態,并附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。
<u>如果您不打算開發大型單頁應用,使用 Vuex 可能是繁瑣冗余的。</u>確實是如此——如果您的應用夠簡單,您最好不要使用 Vuex。一個簡單的 [store 模式]就足夠您所需了。但是,如果您需要構建一個中大型單頁應用,您很可能會考慮如何更好地在組件外部管理狀態,Vuex 將會成為自然而然的選擇。
2.安裝
npm install vuex --save
在main.js(全局)當中引入vuex,并use到項目中,再創建一個store倉庫。
import Vuex from 'vuex'
Vue.use(Vuex)
//創建一個store倉庫
const store = new Vuex.Store({
state:{
count:10
}
})
創建好之后別忘記將store注入到vue實例當中。
接下來就能直接在每個組件當用獲取到你在store中添加的共享數據了。
<p>{{ this.$store.state.count }}</p>