vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

更新時(shí)間：2018年04月13日 10:25:11 作者：adouwt

在vuex中有四大金剛分別是State， Mutations，Actions，Getters，本文對(duì)這四大金剛做了詳細(xì)介紹，本文重點(diǎn)是給大家介紹vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用，感興趣的朋友一起看看吧

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

（上次記得關(guān)于vuex筆記 http://chabaoo.cn/article/138229.htm,是一個(gè)簡(jiǎn)單的應(yīng)用；這是一些簡(jiǎn)單的vue的小組件方法： http://chabaoo.cn/article/138230.htm）

何為四大金剛？

　　1.State （這里可以是小寫的 state，跟官網(wǎng)保持一致，采用大寫，因?yàn)閭€(gè)人習(xí)慣，后面的代碼介紹采用小寫）

　　vuex的狀態(tài)管理，需要依賴它的狀態(tài)樹，官網(wǎng)說：

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

　　簡(jiǎn)單粗暴理解：我們要把我們需要做狀態(tài)管理的量放到這里來，然后在后面的操作動(dòng)它

　　我們來聲明一個(gè)state：

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

2. Mutation

　我們有了state狀態(tài)樹，我們要改變它的狀態(tài)（值），就必須用vue指定唯一方法 mutation，官網(wǎng)說：

　更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type) 和一個(gè) 回調(diào)函數(shù) (handler)。

　簡(jiǎn)單粗暴理解：任何不以mutation的方式改變state的值，都是耍流氓（違法）

我們來一個(gè)mutation：

const mutation = {
 addViews (state) {
 state.views++
 },
 blogAdd (state) {
 state.blogNumber++
 },
 clickTotal (state) {
 state.total++
 }
}

3.Action

　　action 的作用跟mutation的作用是一致的，它提交mutation，從而改變state，是改變state的一個(gè)增強(qiáng)版，官網(wǎng)說：

　　Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

　　簡(jiǎn)單粗暴理解：額，這總結(jié)的差不多了，就這樣理解吧！

　　我們來一個(gè)action：

const actions = {
 addViews ({commit}) {
 commit('addViews')
 },
 clickTotal ({commit}) {
 commit('clickTotal')
 },
 blogAdd ({commit}) {
 commit('blogAdd')
 }
}

4.Getter

官網(wǎng)說：有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，例如對(duì)列表進(jìn)行過濾并計(jì)數(shù)。減少我們對(duì)這些狀態(tài)數(shù)據(jù)的操作

簡(jiǎn)單粗暴理解：狀態(tài)樹上的數(shù)據(jù)比較復(fù)雜了，我們使用的時(shí)候要簡(jiǎn)化操作，上面的state.todos 是一個(gè)對(duì)象，在組件中挑不同的數(shù)據(jù)時(shí)，需要對(duì)其做下處理，這樣每次需要一次就處理一次，我們簡(jiǎn)化操作，將其在getter中處理好，然后export 一個(gè)方法；（額，好像說復(fù)雜了）

我們來一個(gè)getter：

const getters = {
 getToDo (state) {
 return state.todos.filter(item => item.done === true)
 // filter 迭代過濾器 將每個(gè)item的值 item.done == true 挑出來， 返回的是一個(gè)數(shù)組
 }
}

二、使用

學(xué)不用，傻學(xué)，沒啥用，我們得用起來：

1、src 下新建文件

我們?cè)陧?xiàng)目（vue-cli 腳手架）下 src 文件夾下新建一個(gè) store，在這個(gè)store下新建 index.js 文件，將上面的代碼填入，如下面完整的內(nèi)容：

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: '我是碼農(nóng)'},
 {id: 2, done: false, text: '我是碼農(nóng)202號(hào)'},
 {id: 3, done: true, text: '我是碼農(nóng)202號(hào)'}
 ]
}
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 迭代過濾器 將每個(gè)item的值 item.done == true 挑出來， 返回的是一個(gè)數(shù)組
 }
}
export default new Vuex.Store({
 state,
 actions,
 mutations,
 getters
})
// 將四大金剛掛載到 vuex的Store下

2、main.js 導(dǎo)入文件

import Vue from 'vue'
import App from './App'
import router from './router/router.js'
// 引入 狀態(tài)管理 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 }
})

請(qǐng)著重看加粗部分，非加粗部分是import 其他項(xiàng)目功能

3、組件中使用

先上這個(gè)組件代碼：

<template>
 <div>
 <h4>vuex的狀態(tài)管理數(shù)據(jù)</h4>
 <h5>博客標(biāo)題</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數(shù)字 </h4>
 <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>
 <h4>總計(jì)</h4>
 <span>state中total：{{this.$store.state.total}}</span>
 <p>
 <button @click="totalAlise">點(diǎn)擊增加total</button>
 </p>
 
 </div>
</template>

<style>

</style>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default {
 data () {
 return {
 checked: true
 }
 },
 created () {
 // this.$store.dispatch('addViews') // 直接通過store的方法 觸發(fā)action, 改變 views 的值
 this.blogAdd() // 通過mapActions 觸發(fā)mutation 從而commit ，改變state的值
 },
 computed: {
 ...mapState({
 viewsCount: 'views'
 }),
 ...mapGetters({
 todosALise: 'getToDo' // getToDo 不是字符串，對(duì)應(yīng)的是getter里面的一個(gè)方法名字 然后將這個(gè)方法名字重新取一個(gè)別名 todosALise
 })
 },
 methods: {
 ...mapMutations({
 totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定義的一個(gè)別名方法，本組件直接調(diào)用這個(gè)方法
 }),
　　 ...mapActions({

 blogAdd: 'blogAdd' // 第一個(gè)blogAdd是定義的一個(gè)函數(shù)別名稱，掛載在到this(vue)實(shí)例上，后面一個(gè)blogAdd 才是actions里面函數(shù)方法名稱
 }) 
} } </script>

mapState, mapGetters, mapActions, mapMutations

這些名字呢，是對(duì)應(yīng)四大金剛的一個(gè)輔助函數(shù)，

a).mapState，官網(wǎng)說：

當(dāng)一個(gè)組件需要獲取多個(gè)狀態(tài)時(shí)候，將這些狀態(tài)都聲明為計(jì)算屬性會(huì)有些重復(fù)和冗余。為了解決這個(gè)問題，我們可以使用 mapState 輔助函數(shù)幫助我們生成計(jì)算屬性，讓你少按幾次鍵：

對(duì)于官網(wǎng)給出的例子，截個(gè)圖，供學(xué)習(xí)，詳情請(qǐng)進(jìn)官網(wǎng)：https://vuex.vuejs.org/zh-cn/state.html , 我記錄下官網(wǎng)說的少的 ...mapState() 方法

vue 現(xiàn)在好多例子，都是用es6 寫的，es6中增加了好多神兵利器，我們也得用用。我們也要用‘對(duì)象展開運(yùn)算符'，這個(gè)具體的用法，請(qǐng)參考具體的學(xué)習(xí)資料，我們主要講講 ...mapState({...}) 是什么鬼。

下面實(shí)例代碼中：

html:

<p>
　　mapState方式 {{viewsCount}}；<br>
　　直接使用views {{this.$store.state.views}}
</p>

js:

...mapState({
 viewsCount: 'views'
 }),

　　我們需要使用一個(gè)工具函數(shù)將多個(gè)對(duì)象合并為一個(gè)，這個(gè) ... 方法就合適了，將多個(gè)函數(shù)方法合并成一個(gè)對(duì)象，并且將vuex中的this.$store.views

映射到this.viewsCount (this -> vue)上面來，這樣在多個(gè)狀態(tài)時(shí)可以避免重復(fù)使用，而且當(dāng)映射的值和state 的狀態(tài)值是相等的時(shí)候，可以是直接使用

...mapState({
 'views'
 }),

b).mapMutations 其實(shí)跟mapState 的作用是類似的，將組件中的 methods 映射為 store.commit 調(diào)用

上面的代碼：

html:

<span>{{this.$store.state.total}}</span>
 <p>
 <button @click="totalAlise">點(diǎn)擊增加total</button>
 </p>

js:

...mapMutations({
 totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定義的一個(gè)別名方法，本組件直接調(diào)用這個(gè)方法
 })

c). mapActions, action的一個(gè)輔助函數(shù)，將組件的 methods 映射為 store.dispatch 調(diào)用

上例代碼：

html：

<h4>blogNumber數(shù)字 </h4>
 <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>

js:

方法調(diào)用：

created () {
 // this.$store.dispatch('blogAdd') // 直接通過store的方法 觸發(fā)action, 改變 views 的值
 this.blogAdd() // 通過mapActions 觸發(fā)mutation 從而commit ，改變state的值
 },

方法定義：

...mapActions({
blogAdd: 'blogAdd' // blogAdd是定義的一個(gè)函數(shù)別名稱，掛載在到this(vue)實(shí)例上，blogAdd 才是actions里面函數(shù)方法名稱 })

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

html:

<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的值，沒有做過濾操作，如果需要過濾。
　　　　　　　　還需要單獨(dú)寫方法操作
 <span>{{item.text}}</span> <br>
 <span>{{item.done}}</span> 
 </li>
 </ul>

js:

...mapGetters({
 todosALise: 'getToDo' // getToDo 不是字符串，對(duì)應(yīng)的是getter里面的一個(gè)方法名字 然后將這個(gè)方法名字重新取一個(gè)別名 todosALise
 }),

這個(gè) getToDo 是在getters 定義的一個(gè)方法，它將todos 里的對(duì)象屬性done為true的之過濾出來

getToDo (state) {
 return state.todos.filter(item => item.done === true)
 // filter 迭代過濾器 將每個(gè)item的值 item.done == true 挑出來， 返回的是一個(gè)數(shù)組
 }

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

總結(jié)：

mapState, mapGetters, mapActions, mapMutations 就是簡(jiǎn)化我們的一些 this.$store.state.* 的操作，將this.$store.* 里面的狀態(tài) 映射到我們輔助函數(shù)的屬性值里面
方便我們?cè)诮M件中調(diào)用。

您可能感興趣的文章: