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


Posted in Javascript onApril 13, 2018

一、介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters

(上次记得关于vuex笔记 https://3water.com/article/138229.htm,是一个简单的应用;这是一些简单的vue的小组件方法: https://3water.com/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号'}
 ]
}

2. Mutation

 我们有了state状态树,我们要改变它的状态(值),就必须用vue指定唯一方法 mutation,官网说:

 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

 简单粗暴理解:任何不以mutation的方式改变state的值,都是耍流氓(违法)

   我们来一个mutation:

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:

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

4.Getter

官网说:有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数。减少我们对这些状态数据的操作

简单粗暴理解:状态树上的数据比较复杂了,我们使用的时候要简化操作,上面的state.todos 是一个对象,在组件中挑不同的数据时,需要对其做下处理,这样每次需要一次就处理一次,我们简化操作,将其在getter中处理好,然后export 一个方法;(额,好像说复杂了)

 我们来一个getter:

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 文件,将上面的代码填入,如下面完整的内容:

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  导入文件

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、组件中使用

先上这个组件代码:

<template>
 <div>
 <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>
 
 </div>
</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() 方法

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

vue 现在好多例子,都是用es6 写的,es6中增加了好多神兵利器,我们也得用用。我们也要用‘对象展开运算符',这个具体的用法,请参考具体的学习资料,我们主要讲讲 ...mapState({...}) 是什么鬼。

下面实例代码中:

html:

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

直接使用views {{this.$store.state.views}}
</p>

js:

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

我们需要使用一个工具函数将多个对象合并为一个,这个  ... 方法就合适了,将多个函数方法合并成一个对象,并且将vuex中的this.$store.views

映射到this.viewsCount (this -> vue)上面来,这样在多个状态时可以避免重复使用,而且当映射的值和state 的状态值是相等的时候,可以是直接使用 

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

b).mapMutations 其实跟mapState 的作用是类似的,将组件中的 methods 映射为 store.commit 调用

上面的代码:

html:

<span>{{this.$store.state.total}}</span>
 <p>
 <button @click="totalAlise">点击增加total</button>
 </p>

js:

...mapMutations({
 totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法,totalAlise是重新定义的一个别名方法,本组件直接调用这个方法
 })

c). mapActions, action的一个辅助函数,将组件的 methods 映射为 store.dispatch 调用

上例代码:

html:

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

js:

方法调用:

created () {
 // this.$store.dispatch('blogAdd') // 直接通过store的方法 触发action, 改变 views 的值
 this.blogAdd() // 通过mapActions 触发mutation 从而commit ,改变state的值
 },

方法定义:

...mapActions({
blogAdd: 'blogAdd' // blogAdd是定义的一个函数别名称,挂载在到this(vue)实例上,blogAdd 才是actions里面函数方法名称 })

d). mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性:

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的值,没有做过滤操作,如果需要过滤。




还需要单独写方法操作
 <span>{{item.text}}</span> <br>
 <span>{{item.done}}</span> 
 </li>
 </ul>

 js:

...mapGetters({
 todosALise: 'getToDo' // getToDo 不是字符串,对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
 }),

这个 getToDo 是在getters 定义的一个方法,它将todos 里的对象属性done为true的之过滤出来

getToDo (state) {
 return state.todos.filter(item => item.done === true)
 // filter 迭代过滤器 将每个item的值 item.done == true 挑出来, 返回的是一个数组
 }

上面代码操作后的效果截图:

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

总结:

mapState, mapGetters, mapActions, mapMutations  就是简化我们的一些 this.$store.state.* 的操作,将this.$store.* 里面的状态 映射到我们辅助函数的属性值里面
方便我们在组件中调用。

Javascript 相关文章推荐
javascript静态的url如何传递
May 03 Javascript
YUI的Tab切换实现代码
Apr 11 Javascript
Extjs NumberField后面加单位实现思路
Jul 30 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
使用jQuery获取data-的自定义属性
Nov 10 Javascript
详解AngularJS ui-sref的简单使用
Apr 24 Javascript
vue项目实战总结篇
Feb 11 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
Apr 25 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
vue实现中部导航栏布局功能
Jul 30 Javascript
使用js实现一个简单的滚动条过程解析
Sep 10 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
如何编写一个d.ts文件的步骤详解
Apr 13 #Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 #Javascript
Vue2.0 实现单选互斥的方法
Apr 13 #Javascript
Vue render深入开发讲解
Apr 13 #Javascript
You might like
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
PHP SplObjectStorage使用实例
2015/05/12 PHP
PHP对象克隆clone用法示例
2016/09/28 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
完美的php分页类
2017/10/24 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
用js 让图片在 div或dl里 居中,底部对齐
2008/01/21 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
2016/12/22 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Angular学习教程之RouterLink花式跳转
2018/05/03 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
opencv与numpy的图像基本操作
2019/03/08 Python
浅析python中while循环和for循环
2019/11/19 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
财务会计专业个人求职信范本
2014/01/08 职场文书
鲁迅故居导游词
2015/02/05 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Linux中一对多配置日志服务器的详细步骤
2022/07/23 Servers
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python