vuex里mapState,mapGetters使用詳解

這次給大家帶來vuex里mapState,mapGetters使用詳解，vuex里mapState,mapGetters使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

 

一、介紹 vuex里面的四大金剛：State， Mutations，Actions，Getters

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

何為四大金剛？

　　1.State （這里可以是 小寫的 state，跟官網保持一致，采用大寫，因為個人習慣，后面的代碼介紹采用小寫）

　　vuex的狀態管理，需要依賴它的狀態樹，官網說：

　　Vuex 使用單一狀態樹——是的，用一個對象就包含了全部的應用層級狀態。至此它便作為一個“唯一數據源 (SSOT)”而存在。這也意味着，每個應用將僅僅包含一個 store 實例。單一狀態樹讓我們能夠直接地定位任一特定的狀態片段，在調試的過程中也能輕易地取得整個當前應用狀態的快照。

　　簡單粗暴理解： 我們要把我們需要做狀態管理的量放到這里來，然后在后面的操作動它

　　我們來聲明一個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. Mutation

　更改 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 挑出來， 返回的是一個數組  } }

二、使用

學不用，傻學，沒啥用，我們得用起來：

1、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下

2、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 其他項目功能

3、組件中使用

先上這個組件代碼：

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 挑出來， 返回的是一個數組  }

上面代碼操作后的效果截圖：