vuex是專門用來管理vue.js應用程序中狀態的一個插件。他的做用是將應用中的全部狀態都放在一塊兒，vue
集中式來管理。須要聲明的是，這裏所說的狀態指的是vue組件中data裏面的屬性。簡單的來講,vuex
它就是存儲公共變量的東西,而後插件能夠經過它來訪問,或者修改數據,來達到響應式.npm
至關於一個倉庫,裏面能夠放不少公共的東西,而這些公共的東西均可以讓組件使用.學習
首先作這個以前,咱們下載好vuex插件,怎麼下載呢 用到咱們的npm run vuex --savethis
下載好 開始配置spa
首先在src文件下建立個store文件 裏面再新建一個index.js插件
1. 導入Vue--->import Vue from "vue"調試
2. 導入Vuex--->import Vuex form "./vuex"code
3. Vue.use(Vuex)orm
4.
export default new Vuex.Store({
state:{},
mutations:{},
getters:{}
actions:{},
modules:{}
})
這就是vueX的配置環境
在這裏咱們須要注意,咱們用的是Vuex.Store這個功能,因此在新建時用的Vuex.Store,
就是爲了在全部組件中使用均可以有這個方法.
接下來咱們介紹一下vuex的屬性
state:
一個項目裏面,只有一個store,不要創建多個store,全部的數據放在state中就能夠了.(單一數據源state)
getters:
數據須要通過一系列變化,而後經過使用getters定義一個方法,而後調用的時候經過$store.getters.方法名來調用
經過三個小例子帶着瞭解一下getters屬性
state定義了students的信息以下
students: [ { id: 110, name: "juelebao", age: 17 }, { id: 111, name: "zhangsan", age: 19 }, { id: 112, name: "liuyifei", age: 21 }, { id: 113, name: "zhoujielun", age: 24 } ]
三個小要求:
1. 咱們如今須要將學生信息裏面年齡超過20的取出來
2. 取出超過20歲學生的個數
3. 咱們想要經過id進行查詢,須要往裏面傳參數
以上要求均要經過vuex裏面的getters屬性定義方法
第一個: 須要將學生信息裏面年齡超過20的取出來
over20(state){
return state.students.filter( obj =>{
return obj.age>20
})
}
定義這樣一個方法就能夠了,調用時$store.getters.over20
第二個: 取出超過20歲學生的個數
方法一:
over20count(state){ return state.students.filter( obj=> { return obj.age > 20 }).length }
方法二: 告訴咱們也能夠調用getters裏面的方法
over20count(state,getters){ return getters.over20.length }
方法三:在調用的時候加length 也就是 $store.getters.over20.length
固然,咱們這些方法在正確調用後,就能夠獲得結果了
這就是getter一些用法了
簡單舉個例子以前作過的計數器
咱們如今將計算器封裝成一個組件,而後咱們將他放到掛載的頁面上
connter.vue代碼以及另外一組件(組件2個共用vuex中的數據)
這裏咱們將connter放在state中,將事件方法放在mutations中,
注意,咱們在建立increment和decrement事件的時候,傳入了state,若是你不寫的話,雖然不會報錯,可是頁面會沒有任何變化.因此必需要有一個參數接收,而後利用接收的參數去訪問connter變量.而後咱們就去connter組件中定義兩個事件了,add和down,固然咱們是經過在方法中使用this.$store.commit("vuex中的mutations中的事件類型")好比個人add中的this.$store.commit("increment")而後就至關於執行了increment這個操做.
疑問: 在組件中如何訪問呢?
在組件中,咱們能夠這樣訪問 $store.state.connter在down中用法和add同樣
注意:
咱們能夠經過mutations方式改變數據,而非直接改變數據$store.state ++,這是由於這樣vuex對象能夠監聽或者追蹤到數據的改變. 方便咱們的調試這就是vuex最基本的一個使用了
補充:mutations 攜帶參數用法
mutations是vuex惟一的提交更新的一種方式,在從此寫項目的時候,若是要用vuex咱們必需要用這種方式來對數據進行更新. 不能越過這個直接進行更改.
下面,咱們仍是來學習mutations攜帶參數的用法
仍是計數器,咱們如今想用動態傳遞參數的方式來進行計數,好比count爲任意數時上代碼吧 藉助代碼幫咱們理解
組件connter中
<button @click="incrementCount(5)">+5</button> <button @click="incrementCount(10)">+10</button> methods:{ incrementCount(count){ this.$store.commit("decrementCount",count) } }
vuex中的mutations:
decrementCount(state,count){ state.connter+=count }
這樣咱們就能夠進行參數傳遞了.
二個例子,就是咱們可不能夠傳遞學生的信息?答案確定是能夠的
例如代碼:
addStu(){ var stu = { id : 114,name:"lisi",age: 21 } this.$store.commit("addStud",stu) }
結合vuex中的mutations定義的
addStu(state,stu){ state.students.push(stu) }
關於mutation的提交風格
這裏面的參數pyload被稱爲負載,就是講這個地方的數據上傳,能夠是對象,能夠是一個值
若是是學生信息的話直接就傳過去一個對象就能夠
第一種:
fucn(){
this.$store.commit("事件類型",pyload)
}
第二種:
fucn(){
this.$store.commit({
type:"事件類型",
pyload:pyload
})
}
兩種分隔寫法不同,在vuex中的mutations中接收值也是不同的
第一種方式接收的時候,pyload是什麼就是什麼
第二種方式接收的時候,pyload是整個的一個對象.
這樣咱們就搞定了mutations攜帶參數了,注意一下,在mutations中定義的方法,裏面的參數第一個參數就是state不能改變.
今天簡單總結了下,還有一些屬性尚未學,明天學了再拿出來.