vuex是專門用來管理vue.js應用程式中狀態的一個外掛。他的作用是將應用中的所有狀態都放在一起，
集中式來管理。需要宣告的是，這裡所說的狀態指的是vue元件中data裡面的屬性。簡單的來說,
它就是儲存公共變數的東西,然後外掛可以通過它來訪問,或者修改資料,來達到響應式.
相當於一個倉庫,裡面可以放很多公共的東西,而這些公共的東西都可以讓元件使用.
首先做這個之前,我們下載好vuex外掛,怎麼下載呢 用到我們的npm run vuex --save
下載好 開始配置
首先在src檔案下建立個store檔案 裡面再新建一個index.js
1. 匯入Vue--->import Vue from "vue"
2. 匯入Vuex--->import Vuex form "./vuex"
3. Vue.use(Vuex)
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不能改變.
今天簡單總結了下,還有一些屬性還沒有學,明天學了再拿出來.