vuex的使用之mapGetters[通俗易懂]

vuex的使用之mapGetters[通俗易懂]vue项目中,经常会使用到vuex,vuex是vue的一个状态管理。本文简单总结一下:vuex中mapGetters的使用。如果一个变量或对象需要在多个页面和组件中使用,那么,可以使用mapGetters。一.vuex中声明变量个方法1.在state中声明:state:{freeShipping:cookie.get(‘freeShipping’),}2.在mutations中书写方法:mutations:{updatefreeShipping(state,fre

大家好,又见面了,我是你们的朋友全栈君。

vue项目中,经常会使用到vuex,vuex是vue的一个状态管理。

本文简单总结一下:vuex中mapGetters的使用。

如果一个变量或对象需要在多个页面和组件中使用,那么,可以使用mapGetters。

一.vuex中声明变量个方法

1.在state中声明:

state: {
   freeShipping:cookie.get('freeShipping'),
}

2.在mutations中书写方法:


mutations: {
    updatefreeShipping(state, freeShipping) {
            state.freeShipping =freeShipping;
        },
 }
 

3.在getters中书写:


getters: {
    freeShipping: state => state.freeShipping || {}
}
  

二.在各页面中使用

1,引入

   import { mapGetters  } from "vuex";

2,在method同级上放入computed

computed: mapGetters(["freeShipping"]),

computed: {
               ...mapGetters(["freeShipping"])
          } ,

可放入多个对象

  computed: mapGetters(["userInfo","freeShipping"]),

3,页面变量取用

{
  
  {freeShipping.value}}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/144026.html原文链接:https://javaforall.net

(1)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mysql timestamp[通俗易懂]

    mysql timestamp[通俗易懂]一般建表时候,创建时间用datetime,更新时间用timestamp。这是非常重要的。【1】timestamp字段所在行更新时,timestamp字段会被更新成当前时间(1.1)一个表中出现了两

    2022年7月2日
    26
  • 2021最新Java基础篇(后续已更新到另一篇文章)

    2021最新Java基础篇(后续已更新到另一篇文章)提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、Java基础?1.1什么是变量:1.2类型的分类:1.3类型的大小:1.4类型的转换与强制类型转换:二、使用步骤1.引入库2.读入数据总结前言提示:在这里可以学到Java基础内容。一、Java基础?1.1什么是变量:变量就是系统为程序分配的一块内存单元,用来存储各种类型的数据。由于该存储单元中的数据可以发生改变,因此得名为”变量”1.2类型的分类:1、基本数据类型变量2、引用数据类型变量

    2022年7月9日
    20
  • HD251HJ_HB5082

    HD251HJ_HB5082原题链接描述Givenasequence1,2,3,……N,yourjobistocalculateallthepossiblesub-sequencesthatthesumofthesub-sequenceisM.输入Inputcontainsmultipletestcases.eachcasecontainstwoint…

    2022年10月2日
    2
  • 盗号者:我就想欺负你们这些不懂盗号原理的小白「建议收藏」

    盗号者:我就想欺负你们这些不懂盗号原理的小白「建议收藏」“好好看完这篇文章,不做盗号者眼里的香饽饽!”

    2022年6月23日
    31
  • 你还不知道Java异或运算符的妙用?

    你还不知道Java异或运算符的妙用?异或(XOR)运算符当两个boolean类型的变量,locked^deleted,如果locked与deleted是不同的,返回true。如果两个操作数是相同的,则返回false。因此,当我们需要同时检查两个不成立的条件时,可以使用异或运算符号。假设我们有两个条件,A和B,下面显示了A^B的可能值:A^B操作等于(A&&!B)||(!A&&B)。在Java中使用接下来让我看一下Java中的异或操作,当然我们可以.

    2022年9月1日
    6
  • 淘宝十年历程随笔_七十年历程

    淘宝十年历程随笔_七十年历程初创1.淘宝PV页面访问量在十几亿到二十几亿,所以即使访问淘宝首页页面服务器也有成百上千台,这过程用到的负载均衡技术LVS(LinuxVirtualServer由淘宝章文嵩博士开发)2.

    2022年8月3日
    8

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号