官方地址:https://vuex.vuejs.org/zh/guide/getters.html

Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter 会暴露为 store.getters 对象,可以以属性的形式访问这些值,也可以以方法访问这些值。

目录结构:

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from "./state"
import getters from './getters'
import mutations from "./mutations"
import actions from "./actions"
import user from './module/user' Vue.use(Vuex) export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules: {
user
}
})

getters.js:

//通过方法访问getters
//你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。
const getters = {
appNameWithVersion: (state) => {
return `${state.appName}v2.0`
}
}
export default getters

user.js:

const state = {
//
userName:'Caoqi'
}
const getters = {
firstLetter: (state) => {
return state.userName.substr(0, 1)
}
}
const mutations = {
//
}
const actions = {
//
}
export default {
namespaced:true,//有利于模块更加密闭,不受外界的干扰
state,
getters,
mutations,
actions
}

store.vue:

<template>
<div>
<a-input :value="inputValue" @input="handlerInput"></a-input>
<p>{{ inputValue }} -> lastLetter is {{ inputValueLastLetter }}</p>
<p>appName: {{ appName }}, appNameWithVersion : {{ appNameWithVersion }}</p>
<p>userName : {{ userName }}, firstLetter is : {{ firstLetter }}</p>
</div>
</template>
<script>
import AInput from "_c/AInput.vue";
import AShow from "_c/AShow.vue";
//变量的解构赋值
import { mapState, mapGetters } from "vuex";
import { stat } from "fs";
export default {
name: "store",
data() {
return {
inputValue: ""
};
},
components: {
AInput: AInput,
AShow: AShow
},
computed: {
//ES6展开操作符 mapState展开会形成一个对象 使用对象展开运算符将此对象混入到外部对象中
...mapState({
appName: state => state.appName
}),
...mapState("user", {
userName: state => state.userName
}),
// 使用对象展开运算符将 getter 混入 computed 对象中
// ...mapGetters(["appNameWithVersion"]),
appNameWithVersion() {
//通过属性访问getters,Getter 会暴露为 store.getters 对象,可以以属性的形式访问这些值:
return this.$store.getters.appNameWithVersion;
},
...mapGetters("user", ["firstLetter"]),
inputValueLastLetter() {
return this.inputValue.substr(-1, 1);
}
},
methods: {
handlerInput(val) {
this.inputValue = val;
}
}
};
</script>

Vuex基础-Getter的更多相关文章

  1. Vuex 基础

    其他章节请看: vue 快速入门 系列 Vuex 基础 Vuex 是 Vue.js 官方的状态管理器 在vue 的基础应用(上)一文中,我们已知道父子之间通信可以使用 props 和 $emit,而非 ...

  2. vuex 基础:教程和说明

    作者注:[2016.11 更新]这篇文章是基于一个非常旧的 vuex api 版本而写的,代码来自于2015年12月.但是,它仍能针对下面几个问题深入探讨: vuex 为什么重要 vuex 如何工作 ...

  3. Vuex基础-Module

    官方API地址:https://vuex.vuejs.org/zh/guide/modules.html 前面几节课写的user.js就称为一个module,这样做的原因是:由于使用单一状态树,应用的 ...

  4. Vuex基础-Action

    在文章开始之前,再次强调一句:Vuex会把getter mutations action不管是在模块定义的还是在根级别定义的 都会注册在全局 官网API地址:https://vuex.vuejs.or ...

  5. Vuex基础-Mutation

    借助官网的一张图,更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.不可以直接对其进行赋值改变.需要注意的是,mutations只能做一些同步的操作. ​​​ 代码结构: ​ ...

  6. 前端vuex基础入门

    vuex简介 是一个专门为vue.应用程序开的状态管理模式 它采用集中式存储管理应用的所有组件的状态 (类似于全局变量) 并以相应的规则保证以一种可预测的方式发生改变(相应式变化) 应用场景 多个视图 ...

  7. vuex基础入门

    Vuex简介 vuex的安装和组成介绍 [外链图片转存失败(img-nWQUUuyh-1565273314232)(https://upload-images.jianshu.io/upload_im ...

  8. Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法

    Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...

  9. vueX基础知识点笔记

    vuex是专门用来管理vue.js应用程序中状态的一个插件.他的作用是将应用中的所有状态都放在一起, 集中式来管理.需要声明的是,这里所说的状态指的是vue组件中data里面的属性.简单的来说, 它就 ...

随机推荐

  1. 爬虫(GET)——传递要查询的关键字

    工具:python3 目标:传递关键字,爬取任意关键字的页面 import urllib.request # 定义User-Agent,要爬取的url,以及要查询的关键字 headers = {&qu ...

  2. python 操作excel 的包 函数

    ###########sample 1 https://blog.csdn.net/chengxuyuanyonghu/article/details/54951399 python操作excel主要 ...

  3. 转 sql profile 绑定 litera and move profile to another db l for spa

    SQL TYPE 1:for bind value sql , first create a good plan with literal and with good  profile. then u ...

  4. 百度webuploader 上传演示例子

    前端代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="baiduWebU ...

  5. leetcode 181 Employees Earning More Than Their Managers 不会分析的数据库复杂度

    https://leetcode.com/problems/employees-earning-more-than-their-managers/description/ 老师上课没分析这些的复杂度, ...

  6. Engineer Assignment HDU - 6006 状压dp

    http://acm.split.hdu.edu.cn/showproblem.php?pid=6006 比赛的时候写了一个暴力,存暴力,过了,还46ms 那个暴力的思路是,预处理can[i][j]表 ...

  7. Java基础13-数组算法

    1.数组的复制 //复制算法,将arr1数组的值复制给arr2数组 import java.util.Arrays; public class Test1{ public static void ma ...

  8. div拖动实现及优化

    工作中的一个项目ui界面比较传统(chou),就想着把前端重构一下.内容之一是把导航栏从上方固定高度改为了右侧伸缩的边栏,好处是边栏可伸缩,占用面积小.不完美的地方是有时候会遮挡页面上最右边的按钮,作 ...

  9. phpwind本地安装 inernal server error错误

    wampserver2.2环境,本地安装phpwind9.0时出错: Internal Server Error The server encountered an internal error or ...

  10. Object公用方法

    Object是所有类的父类,任何类都默认继承Object. Object类到底实现了哪些方法?   1.clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否 ...