vueX基礎知識點筆記

vuex是專門用來管理vue.js應用程式中狀態的乙個外掛程式。他的作用是將應用中的所有狀態都放在一起，

集中式來管理。需要宣告的是，這裡所說的狀態指的是vue元件中data裡面的屬性。簡單的來說,

它就是儲存公共變數的東西,然後外掛程式可以通過它來訪問,或者修改資料,來達到響應式.

相當於乙個倉庫,裡面可以放很多公共的東西,而這些公共的東西都可以讓元件使用.

首先在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(,

mutations:{},

getters:{}

actions:{},

modules:{}

})這就是vuex的配置環境

在這裡我們需要注意,我們用的是vuex.store這個功能,所以在新建時用的vuex.store,

就是為了在所有元件中使用都可以有這個方法.

接下來我們介紹一下vuex的屬性

state:

乙個專案裡面,只有乙個store,不要建立多個store,所有的資料放在state中就可以了.(單一資料來源state)

getters:

資料需要經過一系列變化,然後通過使用getters定義乙個方法,然後呼叫的時候通過$store.getters.方法名來呼叫

通過三個小例子帶著了解一下getters屬性

state定義了students的資訊如下

students: [,,
,]

三個小要求:

1. 我們現在需要將學生資訊裡面年齡超過20的取出來

2. 取出超過20歲學生的個數

3. 我們想要通過id進行查詢,需要往裡面傳引數

以上要求均要通過vuex裡面的getters屬性定義方法

第乙個: 需要將學生資訊裡面年齡超過20的取出來

over20(state))

}定義這樣乙個方法就可以了,呼叫時$store.getters.over20

第二個: 取出超過20歲學生的個數

方法一:

over20count(state)).length
}

方法二: 告訴我們也可以呼叫getters裡面的方法

over20count(state,getters)

方法三:在呼叫的時候加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中

+5
+10methods:
}

vuex中的mutations:

decrementcount(state,count)

這樣我們就可以進行引數傳遞了.

二個例子,就是我們可不可以傳遞學生的資訊?答案肯定是可以的

例如**:

addstu()
this.$store.commit("addstud",stu)
}

結合vuex中的mutations定義的

addstu(state,stu)

關於mutation的提交風格

這裡面的引數pyload被稱為負載,就是講這個地方的資料上傳,可以是物件,可以是乙個值

如果是學生資訊的話直接就傳過去乙個物件就可以

第一種:

fucn()

第二種:

fucn())

}兩種分隔寫法不一樣,在vuex中的mutations中接收值也是不一樣的

第一種方式接收的時候,pyload是什麼就是什麼

第二種方式接收的時候,pyload是整個的乙個物件.

這樣我們就搞定了mutations攜帶引數了,注意一下,在mutations中定義的方法,裡面的引數第乙個引數就是state不能改變.

今天簡單總結了下,還有一些屬性還沒有學,明天學了再拿出來.

vueX基礎知識點筆記

04 Vuex 基礎知識點

html css基礎知識點筆記

基礎知識點

vueX基礎知識點筆記

04 Vuex 基礎知識點

html css基礎知識點筆記

基礎知識點

相關推薦