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号‘}

 ]

}

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>

 <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:

<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 挑出来, 返回的是一个数组

 }

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue常用组件使用详解

js实现复制文本文件功能(步奏详解)

以上就是vuex里mapState,mapGetters使用详解的详细内容,更多请关注php中文网其它相关文章!

原文地址:https://www.cnblogs.com/Free-Thinker/p/10717634.html

时间: 2024-10-07 09:12:33

vuex里mapState,mapGetters使用详解的相关文章

在虚拟机里安装VMwareTools工具(详解)

首先要确保 你当前 虚拟机这款软件 是否是正常版本, 因为有些虚拟机软件 简体版,导致无法安装VMwareTools工具. 如果没有问题,就可以进入正题了: 1. 在菜单栏里,选择虚拟机菜单的子菜单安装VMwareTools, 此时你会发现 Linux系统里多了一个VMwareTools光盘, 打开之后,就会发现 有一个压缩包:VMwareTools-5.5.3-34685.tar.gz, 将这个压缩包 复制到 /tmp 目录下,在地址栏里输入/tmp 按回车键,即可转入到/tmp 目录了, 然

Android Service生命周期 Service里面的onStartCommand()方法详解

2014-10-21 23:40 32人阅读 评论(0) 收藏 举报 在Demo上,Start一个Service之后,执行顺序:onCreate - > onStartCommand 然后关闭应用,会重新执行上面两步. 但是把代码拷贝到游戏工程发现,关闭游戏后,只执行了onStart,却没有执行onStartCommand! 查找到下面的文章: [plain] view plaincopy Service里面的onStartCommand()方法详解 启动service的时候,onCreate方

Java 里的异常(Exception)详解

作为一位初学者, 本屌也没有能力对异常谈得很深入.   只不过Java里关于Exception的东西实在是很多. 所以这篇文章很长就是了.. 一, 什么是java里的异常 由于java是c\c++ 发展而来的,  首先我们先看看c语言里的错误. 1.1 c语言里的错误 我们实现1个程序的过程包括,  代码编写, 编译代码成为程序,  执行程序. . 其中大部分常见的语法错误都会被编译代码这样部过滤掉.   但是即使通过了编译. 执行程序这一步可能还是会有错误. 原因很多, 例如常见的除数为0,

LAMP里php.ini配置文件详解

路径:/usr/local/php/etc/php.ini php用":"作为"注释"符号,shell用"#"作为"注释"符号: 编辑php.ini [[email protected] ~]# vim /usr/local/php/etc/php.ini 1. 查询/disable_functions 设置禁用函数 disable_functions = eval,assert,popen,passthru,escapesh

Hibernate(或其它ORM)里的inverse用法详解,内容摘自Java web轻量级开发面试教程

本文来是从 java web轻量级开发面试教程从摘录的. Inverse的英文含义是反转,在Hibernate中用来决定是由哪方来维护两个业务实体类之间的关联关系,具体而言,就是由哪方去设置这个被外键约束的字段值. 它的默认值是false,也就是说,本端(比如inverse=false写在学生端,那么本端是学生,另外一方是课程)不"反转控制权",这句别扭的话的另外一种说法是,本端维护关联关系.如果两边都不写,那么两端都维护.这样会造成问题,即新时因为两端都控制关系,因此可能会导致重复更

django的views里面的request对象详解大全

简介 HTTP 应用的信息是通过 请求报文 和 响应报文 传递的,关于更多的相关知识,可以阅读<HTTP权威指南>获得. 其中 请求报文 由客户端发送,其中包含和许多的信息,而 django 将这些信息封装成了 HttpRequest 对象,该对象由 HttpRequest 类创建.每一个请求都会生成一个 HttpRequest 对象,django会将这个对象自动传递给响应的视图函数,一般视图函数约定俗成地使用 request 参数承接这个对象. 例如: def index(request):

Apache里的httpd-vhosts.conf详解

首先看下面的配置: <VirtualHost *:80> ServerAdmin [email protected] DocumentRoot "D:/xampp/htdocs/wherein" ServerName www.shop_dev.com ErrorLog "logs/wherein.com-error.log" CustomLog "logs/wherein.com-access.log" common <Dire

Service里面的onStartCommand()方法详解

启动service的时候,onCreate方法只有第一次会调用,onStartCommand和onStart每次都被调用.onStartCommand会告诉系统如何重启服务,如判断是否异常终止后重新启动,在何种情况下异常终止 onStartCommand和onStart区别 // This is the old onStart method that will be called on the pre-2.0 // platform. On 2.0 or later we override on

python里面的xlrd模块详解(一)

那我就一下面积个问题对xlrd模块进行学习一下: 1.什么是xlrd模块? 2.为什么使用xlrd模块? 3.怎样使用xlrd模块? 1.什么是xlrd模块? ?python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 今天就先来说一下xlrd模块: 一.安装xlrd模块 ? 到python官网下载http://pypi.python.org/pypi/xlrd模块安装,前提是已经安装了python 环境. ?或者在cmd窗口  pip