vuex裏mapState,mapGetters使用詳解

此次給你們帶來vuex裏mapState,mapGetters使用詳解,vuex裏mapState,mapGetters使用的注意事項有哪些,下面就是實戰案例,一塊兒來看一下。php

 

1、介紹 vuex裏面的四大金剛:State, Mutations,Actions,Getterscss

(上次記得關於vuex筆記 http://www.jb51.net/article/138229.htm,是一個簡單的應用;這是一些簡單的vue的小組件方法: http://www.jb51.net/article/138230.htm)html

何爲四大金剛?vue

  1.State (這裏能夠是 小寫的 state,跟官網保持一致,採用大寫,由於我的習慣,後面的代碼介紹採用小寫)es6

  vuex的狀態管理,須要依賴它的狀態樹,官網說:vuex

  Vuex 使用單一狀態樹——是的,用一個對象就包含了所有的應用層級狀態。至此它便做爲一個「惟一數據源 (SSOT)」而存在。這也意味着,每一個應用將僅僅包含一個 store 實例。單一狀態樹讓咱們可以直接地定位任一特定的狀態片斷,在調試的過程當中也能輕易地取得整個當前應用狀態的快照。vue-cli

  簡單粗暴理解: 咱們要把咱們須要作狀態管理的量放到這裏來,而後在後面的操做動它element-ui

  咱們來聲明一個state:數組

const state = { 
 blogTitle: '邇伶貳blog',
 views: 10,
 blogNumber: 100,
 total: 0,
 todos: [
 {id: 1, done: true, text: '我是碼農'},
 {id: 2, done: false, text: '我是碼農202號'},
 {id: 3, done: true, text: '我是碼農202號'}
 ]
}

 

 咱們有了state狀態樹,咱們要改變它的狀態(值),就必須用vue指定惟一方法 mutation,官網說:2. Mutationapp

 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似於事件:每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。

 簡單粗暴理解:任何不以mutation的方式改變state的值,都是耍流氓(違法)

咱們來一個mutation:

1

2

3

4

5

6

7

8

9

10

11

const mutation = {

 addViews (state) {

 state.views++

 },

 blogAdd (state) {

 state.blogNumber++

 },

 clickTotal (state) {

 state.total++

 }

}

3.Action

  action 的做用跟mutation的做用是一致的,它提交mutation,從而改變state,是改變state的一個加強版,官網說:

  Action 相似於 mutation,不一樣在於:

Action 提交的是 mutation,而不是直接變動狀態。

Action 能夠包含任意異步操做。

  簡單粗暴理解: 額,這總結的差很少了,就這樣理解吧!

  咱們來一個action:

1

2

3

4

5

6

7

8

9

10

11

const actions = {

 addViews ({commit}) {

 commit('addViews')

 },

 clickTotal ({commit}) {

 commit('clickTotal')

 },

 blogAdd ({commit}) {

 commit('blogAdd')

 }

}

4.Getter

官網說:有時候咱們須要從 store 中的 state 中派生出一些狀態,例如對列表進行過濾並計數。減小咱們對這些狀態數據的操做

簡單粗暴理解:狀態樹上的數據比較複雜了,咱們使用的時候要簡化操做,上面的state.todos 是一個對象,在組件中挑不一樣的數據時,須要對其作下處理,這樣每次須要一次就處理一次,咱們簡化操做,將其在getter中處理好,而後export 一個方法;(額,好像說複雜了)

咱們來一個getter:

1

2

3

4

5

6

const getters = {

 getToDo (state) {

 return state.todos.filter(item => item.done === true)

 // filter 迭代過濾器 將每一個item的值 item.done == true 挑出來, 返回的是一個數組

 }

}

2、使用

學不用,傻學,沒啥用,咱們得用起來:

一、src 下新建文件

咱們在項目(vue-cli 腳手架)下 src 文件夾下新建一個 store,在這個store下新建 index.js 文件,將上面的代碼填入,以下面完整的內容:

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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state = {

 blogTitle: '邇伶貳blog',

 views: 10,

 blogNumber: 100,

 total: 0,

 todos: [

 {id: 1, done: true, text: '我是碼農'},

 {id: 2, done: false, text: '我是碼農202號'},

 {id: 3, done: true, text: '我是碼農202號'}

 ]

}

const actions = {

 addViews ({commit}) {

 commit('addViews')

 },

 clickTotal ({commit}) {

 commit('clickTotal')

 },

 blogAdd ({commit}) {

 commit('blogAdd')

 }

}

const mutations = {

 addViews (state) {

 state.views++

 },

 blogAdd (state) {

 state.blogNumber++

 },

 clickTotal (state) {

 state.total++

 }

}

const getters = {

 getToDo (state) {

 return state.todos.filter(item => item.done === true)

 // filter 迭代過濾器 將每一個item的值 item.done == true 挑出來, 返回的是一個數組

 }

}

export default new Vuex.Store({

 state,

 actions,

 mutations,

 getters

})

// 將四大金剛掛載到 vuex的Store下

二、main.js 導入文件

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

import Vue from 'vue'

import App from './App'

import router from './router/router.js'

// 引入 狀態管理 vuex

import store from './store'

// 引入elementUI

import ElementUI from 'element-ui'

// 引入element的css

import 'element-ui/lib/theme-chalk/index.css'

// 引入font-awesome的css

import 'font-awesome/css/font-awesome.css'

// 引入本身的css

import './assets/css/custom-styles.css'

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */

new Vue({

 el: '#app',

 router,

 store,

 template: '<App/>',

 components: { App }

})

請着重看加粗部分,非加粗部分是import 其餘項目功能

三、組件中使用

先上這個組件代碼:

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

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

<template>

 <p>

 <h4>vuex的狀態管理數據</h4>

 <h5>博客標題</h5>

 <i>

 {{this.$store.state.blogTitle}}

 </i>

 <h5>todos裏面的信息</h5>

 <ul>

 <li v-for = "item in todosALise" :key="item.id">

 <span>{{item.text}}</span> <br>

 <span>{{item.done}}</span>

 </li>

 </ul>

 <h5>初始化訪問量</h5>

 <p>

 mapState方式 {{viewsCount}};<br>

 直接使用views {{this.$store.state.views}}

 </p>

 <h4>blogNumber數字 </h4>

 <span>state中blogNumber:{{this.$store.state.blogNumber}}</span>

 <h4>總計</h4>

 <span>state中total:{{this.$store.state.total}}</span>

 <p>

 <button @click="totalAlise">點擊增長total</button>

 </p>

  

 </p>

</template>

<style>

</style>

<script>

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {

 data () {

 return {

 checked: true

 }

 },

 created () {

 // this.$store.dispatch('addViews') // 直接經過store的方法 觸發action, 改變 views 的值

 this.blogAdd() // 經過mapActions 觸發mutation 從而commit ,改變state的值

 },

 computed: {

 ...mapState({

 viewsCount: 'views'

 }),

 ...mapGetters({

 todosALise: 'getToDo' // getToDo 不是字符串,對應的是getter裏面的一個方法名字 而後將這個方法名字從新取一個別名 todosALise

 })

 },

 methods: {

 ...mapMutations({

 totalAlise: 'clickTotal' // clickTotal 是mutation 裏的方法,totalAlise是從新定義的一個別名方法,本組件直接調用這個方法

 }),

   ...mapActions({

 blogAdd: 'blogAdd' // 第一個blogAdd是定義的一個函數別名稱,掛載在到this(vue)實例上,後面一個blogAdd 纔是actions裏面函數方法名稱

 })

} } </script>

mapState, mapGetters, mapActions, mapMutations

這些名字呢,是對應四大金剛的一個輔助函數,

a).mapState,官網說:

當一個組件須要獲取多個狀態時候,將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題,咱們可使用 mapState 輔助函數幫助咱們生成計算屬性,讓你少按幾回鍵:

對於官網給出的例子,截個圖,供學習,詳情請進官網:https://vuex.vuejs.org/zh-cn/state.html , 我記錄下官網說的少的 ...mapState() 方法

vue 如今好多例子,都是用es6 寫的,es6中增長了好多神兵利器,咱們也得用用。咱們也要用‘對象展開運算符',這個具體的用法,請參考具體的學習資料,咱們主要講講 ...mapState({...}) 是什麼鬼。

下面實例代碼中:

html:

1

2

3

4

<p>

  mapState方式 {{viewsCount}};<br>

  直接使用views {{this.$store.state.views}}

</p>

js:

1

2

3

...mapState({

 viewsCount: 'views'

 }),

  咱們須要使用一個工具函數將多個對象合併爲一個,這個 ... 方法就合適了,將多個函數方法合併成一個對象,而且將vuex中的this.$store.views

映射到this.viewsCount (this -> vue)上面來,這樣在多個狀態時能夠避免重複使用,並且當映射的值和state 的狀態值是相等的時候,能夠是直接使用

1

2

3

...mapState({

 'views'

 }),

b).mapMutations 其實跟mapState 的做用是相似的,將組件中的 methods 映射爲 store.commit 調用

上面的代碼:

html:

1

2

3

4

<span>{{this.$store.state.total}}</span>

 <p>

 <button @click="totalAlise">點擊增長total</button>

 </p>

js:

1

2

3

...mapMutations({

 totalAlise: 'clickTotal' // clickTotal 是mutation 裏的方法,totalAlise是從新定義的一個別名方法,本組件直接調用這個方法

 })

c). mapActions, action的一個輔助函數,將組件的 methods 映射爲 store.dispatch 調用

上例代碼:

html:

1

2

<h4>blogNumber數字 </h4>

 <span>state中blogNumber:{{this.$store.state.blogNumber}}</span>

js:

方法調用:

1

2

3

4

created () {

 // this.$store.dispatch('blogAdd') // 直接經過store的方法 觸發action, 改變 views 的值

 this.blogAdd() // 經過mapActions 觸發mutation 從而commit ,改變state的值

 },

方法定義:

1

2

...mapActions({

blogAdd: 'blogAdd' // blogAdd是定義的一個函數別名稱,掛載在到this(vue)實例上,blogAdd 纔是actions裏面函數方法名稱 })

d). mapGetter 僅僅是將 store 中的 getter 映射到局部計算屬性:

html:

1

2

3

4

5

6

7

8

9

<h5>todos裏面的信息</h5>

 <ul>

 <li v-for = "item in todosALise" :key="item.id">

      // <li v-for = "item in this.$store.state.todos" :key="item.id"> 這裏就是直接讀取store的值,沒有作過濾操做,若是須要過濾。

        還須要單獨寫方法操做

 <span>{{item.text}}</span> <br>

 <span>{{item.done}}</span>

 </li>

 </ul>

js:

1

2

3

...mapGetters({

 todosALise: 'getToDo' // getToDo 不是字符串,對應的是getter裏面的一個方法名字 而後將這個方法名字從新取一個別名 todosALise

 }),

這個 getToDo 是在getters 定義的一個方法,它將todos 裏的對象屬性done爲true的之過濾出來

1

2

3

4

getToDo (state) {

 return state.todos.filter(item => item.done === true)

 // filter 迭代過濾器 將每一個item的值 item.done == true 挑出來, 返回的是一個數組

 }

上面代碼操做後的效果截圖:

相關文章
相關標籤/搜索