四十二、開始Vuex的學(xué)習(xí)：如何在Vue中使用Vuex

@Author：Runsen

@Date：2020/7/12

今天，我們開始了Vuex的學(xué)習(xí)。Vuex用白話來說，就是幫我們存儲一下多個組件共享的數(shù)據(jù)，方便我們對其讀取和更改。

文章目錄

Vuex的簡介

Vuex的安裝

引入 Vuex掛載到vue對象

兄弟組件

路由編寫

Vuex的簡介

Vuex 是專門為 Vue.js 設(shè)計的狀態(tài)管理庫，它集中存儲，管理所有組件的狀態(tài)；通過前面的學(xué)習(xí)，我們知道父組件要把值傳遞給子組件的時候，可以通過 props 來傳遞，子組件要把值傳遞給父組件的時候，可以通過事件的形式來實現(xiàn)，而對于兄弟組件來說，就需要用到 Vuex 來實現(xiàn)了。也就是一個組件把值放入到 Vuex 中，另一個組件從中取值從而實現(xiàn)參數(shù)傳遞的效果。

Vuex的五大特性：狀態(tài)state、計算屬性getter、同步行為mutation、異步行為action、模塊module

state：用于存儲數(shù)據(jù)，類似vue實例的data屬性。

mutations：用于遞交更改，對state對象中的屬性數(shù)據(jù)進行更改。

actions：用于進行遞交異步更改，通過調(diào)用mutations實現(xiàn)對數(shù)據(jù)的更改。

getters：可以認為是store的計算屬性;與計算屬性一樣,getter的返回值會根據(jù)它的依賴緩存起來,且只有當(dāng)它的依賴值發(fā)生變化才會被重新計算

mapGetters：輔助函數(shù)，將 store 中的 getter 映射到局部計算屬性：

module：將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割

Vuex的安裝

下面我們創(chuàng)建Vue項目

創(chuàng)建的目錄如下所示。

下面要執(zhí)行npm install vuex --save 命令安裝 Vuex，要注意的是這里一定要加上 –save，因為你這個包我們在生產(chǎn)環(huán)境中是要使用的。

引入 Vuex掛載到vue對象

先通過官方提供的一個計數(shù)器的示例來引入 Vuex 的使用，具體實現(xiàn)步驟如下，在 src 文件夾下新建 store 文件夾，意思為數(shù)據(jù)倉庫，里面存放了整個項目需要的共享數(shù)據(jù)，在 store 下新建 index.js

index.js代碼如下。

import Vue from 'vue' import Vuex from 'vuex' //使用vuex Vue.use(Vuex) //導(dǎo)出store export default new Vuex.Store({ state: { count: 0 }, //組件通過dispatch方法觸發(fā)actions里面的countAdd方法，然后actions提交mutations里面的countAdd方法。 actions: { //接收組件傳過來的參數(shù)num，Action 函數(shù)接受一個與 store 實例具有相同方法和屬性的 context 對象 countAdd(context,num){ context.commit('countAdd',num) } }, mutations: { //傳入一個state對象，接收傳過來的參數(shù)num countAdd(state,num){ state.count+=num } } })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

這里順便主要介紹下store文件夾中的四個js文件。

index.js //存儲狀態(tài) 并建立依賴關(guān)系 actions.js //觸發(fā)mutations中的方法 請求數(shù)據(jù)寫在這里 getters.js //狀態(tài)獲取邏輯 mutations.js //操作邏輯

1

2

3

4

創(chuàng)建Vuex的實例 new Vuex.store()，然后再main.js將vuex實例掛載到vue對象。接下來，在main.js中引入store，這里我導(dǎo)入了router，router在下篇文章中介紹。

下面就是main.js代碼

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import store from './store/index' // 引入store import router from './router' import App from './App' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', store, router, components: { App }, template: '' })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

執(zhí)行npm run dev跑起來

兄弟組件

Vuex的作用就是在兄弟組件共享數(shù)據(jù)。

下面新建組件Child1.vue，代碼如下。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

下面新建組件Child2.vue，代碼如下。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

最后，新建組件Parent.vue，然后在路由中引過去，指定上面的兩個components。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

路由編寫

關(guān)于router直接是沒有介紹的，其實我在創(chuàng)建項目的時候選擇了router路由。路由就是指定路徑和組件的，index代碼如下。

import Vue from 'vue' import Router from 'vue-router' import Parent from '@/components/Parent' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Parent', component: Parent } ] })

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

下面就是最終的目錄模塊。

最終效果就是點擊第一個按鈕加一，第二個加10的效果。

相信寫到這里，我i應(yīng)該對vuex有了更加清楚的理解了。

JavaScript Node.js Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。