学妹手机里的美照

前言

前一篇写了Vuex基本使用,用起来还稍稍有些繁琐,代码有很多

冗余的地方,这篇就带着大家用更简单的方式来使用Vuex(其实就是怎么更好的偷懒,用更少的代码来完之前的事情)

进入正文....


一、mapGetters 方法

在我们之前要取出store中的getters,在组件中是需要$store.getters.bigSum 才能取到,为了方便会写成计算属性

bigSum(){
return this.$store.getters.bigSum
}

一个两个还能接受,但是如果有很多的,代码会显得十分冗余。不太合适,作为一名合格的程序员,偷懒是必备的哈。

我们能想到的,前辈们都已经考虑到了。所以就有了mapGetter辅助函数。

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

//第一步得先引入
import {mapGetters} from 'vuex' // 第二步 写在计算属性中
computed:{
// 之前的写法
// bigSum(){
// return this.$store.getters.bigSum
// } //借助mapGetters生成计算属性:bigSum(对象写法)
...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法)
// ...mapGetters(['bigSum']),
},

实现效果都是一样的。

如果有多个值需要映射的话, ...mapGetters({bigSum:'bigSum'},{xxxx:'xxxxx'}), 或者...mapGetters(['bigSum','xxxx'])都是可以的,极大的压缩了代码。

二、mapState方法

之前要从store 中取得 state 的话,有下面两种方式

  1. $store.state.sum 或者是下面这种计算属性的方式,但是仍要我们自己写。
  computed:{
sum(){
return this.$store.state.sum
}
},

自动生成方法,和上面的那个mapGetter 是一样的

// 引入的时候多引入一个 mapState
import {mapGetters,mapState} from 'vuex' // 计算属性
computed:{
// sum(){
// return this.$store.state.sum
// }
//借助mapState生成计算属性:sum(对象写法)
...mapState({sum:"sum"}),
//借助mapState生成计算属性:sum(数组写法)
...mapState(['sum']),
},

即使是多个也会非常方便,自动生成是真的香()

三、mapActions方法

用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数

之前的写法

methods: {
increment(){
this.$store.dispatch("increment",1)
}
}

在按钮调用处是如下方式调用的

<button @click="increment">点击自加</button>

自动生成的写法

methods:{

    //靠mapActions生成:increment(对象形式)
...mapActions({increment:'increment'})
//靠mapActions生成:increment(数组形式)
// .mapActions(['increment']) // increment(){
// this.$store.dispatch("increment",1)
// }
//使用方式 这个时候 组件内定义的方法不能像之前一样 重名了,得改一下
zijia(){
// 调用的时候 可以直接this 不用写 $store.dispatch 这个了 后面跟参数即可
this.increment(1);
} }

四、mapMutations方法

用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods:{

    //靠mapActions生成:increment、decrement(对象形式)
...mapMutations({INCREMENT:'INCREMENT'}), //靠mapMutations生成:JIA、JIAN(对象形式)
...mapMutations(['INCREMENT']), // 使用方式
zijia(){
// 之前的方式 this.$store.commit("INCREMENT",1)
this.INCREMENT(1)
}
}

五、模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确。

  2. 原因:项目应用中存在多个模块,多个模块下又分为多个组件,我们将store分模块,管理数据起来更加的方便,也更易进行数据的维护和扩展。

  3. 修改store.js

    const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations: { ... },
    actions: { ... },
    getters: {
    bigSum(state){
    return state.sum * 10
    }
    }
    } const personAbout = {
    namespaced:true,//开启命名空间
    state:{ ... },
    mutations: { ... },
    actions: { ... }
    } const store = new Vuex.Store({
    modules: {
    countAbout,
    personAbout
    }
    })
  4. 开启命名空间后,组件中读取state数据:

    //方式一:自己直接读取
    this.$store.state.personAbout.list
    //方式二:借助mapState读取:
    ...mapState('countAbout',['sum','school','subject']),
  5. 开启命名空间后,组件中读取getters数据:

    //方式一:自己直接读取
    this.$store.getters['personAbout/firstPersonName']
    //方式二:借助mapGetters读取:
    ...mapGetters('countAbout',['bigSum'])
  6. 开启命名空间后,组件中调用dispatch

    //方式一:自己直接dispatch
    this.$store.dispatch('personAbout/addPersonWang',person)
    //方式二:借助mapActions:
    ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
  7. 开启命名空间后,组件中调用commit

    //方式一:自己直接commit
    this.$store.commit('personAbout/ADD_PERSON',person)
    //方式二:借助mapMutations:
    ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

六、项目结构

vuex并没有强制大家使用什么样的结构,更多的是一种规则、习惯、建议。

大部分时候Vuex会遵守以下几个规则:

  1. 应用层级的状态应该集中到单个 store 对象中。
  2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
  3. 异步逻辑都应该封装到 action 里面。

另外就是,当我们的项目变得十分庞大的时候,我们可以将action、mutation 和 getter 分割到单独的文件。引入,最后直接导出 store即可,之后再在main.js中引入。

对于大型应用,vuex建议大致如下的项目结构。(我们在平时开发时也应该要有这种分模块的思想,无论在前端还是后端都应如此,因为这会让接手你项目的人更为轻松)

├── index.html
├── main.js
├── api
│ └── ... # 抽取出API请求
├── components
│ ├── App.vue
│ └── ...
└── store
├── index.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── cart.js # 购物车模块
└── products.js # 产品模块

后语

大家一起加油!!!如若文章中有不足之处,请大家及时指出,在此郑重感谢。

纸上得来终觉浅,绝知此事要躬行。

大家好,我是博主宁在春主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望:我们,待别日相见时,都已有所成

「后端小伙伴来学前端了」Vuex进阶操作,让你的代码更加高效(简称如何学会偷懒 【手动狗头】)的更多相关文章

  1. 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  2. 「前端开发者」如何把握住「微信小程序」这波红利?

    由于前两周一直在老家处理重要事情,虽然朋友圈被「微信小程序」刷爆了,但并没有时间深入了解. 昨天回广州之后,第一件事情就是把「微信小程序」相关的文章.开发文档.设计规范全部看了一遍,基本上明白了「微信 ...

  3. 「newbee-mall新蜂商城开源啦」 前后端分离的 Vue 版本即将开源

    新蜂商城 Vue 版本 2019 年 10 月份我在 GitHub 开源仓库中上传了新蜂商城项目的所有源码,至今已经有小半年的时间了,感兴趣的可以去了解一下这个 Spring Boot 技术栈开发的商 ...

  4. ife 零基础学院 day 1 - 我为什么想学前端

    与前端结缘   我是后端研发,毕业四年,用了四年C#,一开始写ASP.NET,有时会在asp页面写简单的js和html,做点css样式调整.当时的感触是前端调试太费劲了,因为没有js.html.css ...

  5. 「newbee-mall新蜂商城开源啦」GitHub 上最热门的 Spring Boot 项目,我也要做一次靓仔!

    没有一个冬天不可逾越,也没有一个春天不会到来. 介绍一下新蜂商城的近况,同时,新蜂商城 Vue 版本目前也在开发中,在这篇文章里我也向大家公布一下新蜂商城 Vue 版本的开发进度,和大家同步一下,在不 ...

  6. 重学前端 --- Promise里的代码为什么比setTimeout先执行?

    首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...

  7. Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置

    前端网络访问,主流方案就是 Ajax,Vue 也不例外,在 Vue2.0 之前,网络访问较多的采用 vue-resources,Vue2.0 之后,官方不再建议使用 vue-resources ,这个 ...

  8. 原生JS实现轮播+学前端的感受(防止走火入魔)

    插件!插件!天天听到有人求这个插件,那个插件的,当然,用第三方插件可以大幅提高开发效率,但作为新手,我还是喜欢自己来实现,主要是我有时间! 今天我来给大家分享下用原生JS实现图片轮播的写法 前辈们可以 ...

  9. SSH连接时出现「WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!」解决办法

    用ssh來操控github,沒想到連線時,出現「WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!」,後面還有一大串英文,這時當然要向Google大神求助 ...

  10. 前后端分离之Web前端架构设计

    架构设计:前后端分离之Web前端架构设计 在前面的文章里我谈到了前后端分离的一些看法,这个看法是从宏观的角度来思考的,没有具体的落地实现,今天我将延续上篇文章的主题,从纯前端的架构设计角度谈谈前后端分 ...

随机推荐

  1. java单例设计模式

    单例模式的特点: 1.单例类只能有一个对象(实例). 2.单例类必须自己创建自己的唯一实例 . 3.单例类必须给所有其他对象提供这一实例. 设置步骤: 1.将对象的应用成员变量用private来修饰. ...

  2. javascript设计模式与开发实践阅读笔记(7)——迭代器模式

    迭代器模式:指提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该对象的内部表示. 迭代器模式可以把迭代的过程从业务逻辑中分离出来,在使用迭代器模式之后,即使不关心对象的内部构造,也可以按顺 ...

  3. 数dp多少个0-n多少0-9

    #include <bits/stdc++.h> using namespace std; const int N = 15; int n; int dp[N][N][N]; int a[ ...

  4. SVN的搭建和使用总结

    Subversion是优秀的版本控制工具,其具体的的优点和详细介绍就不多做介绍,主要说一下SVN的服务端搭建.客户端安装.使用及出现的问题的解决办法. 首先来下载和搭建SVN服务器. 现在Subver ...

  5. Com原理及應用——Com對象和接口

    1.COM对象的理解 COM对象类似于C++语言中类的概念,类的每个实例代表一个COM对象,它也包括属性(即状态)和方法(即操作),状态反映对象的存在,方法就是接口. 2.COM对象的标识-CLSID ...

  6. js 浏览器上调试方法多样

    1.alert(111)       直接打印出 111 2.debugger        写在代码要调试的地方 3.直接在控制台 source 里找到要调试的代码打断点 4.console 常用的 ...

  7. es6常用语法学习笔记

    1.let和const的常规使用 let声明的变量不存在预解析 let声明的变量不允许重复使用(在同一个作用域内) ES6引入了块级作用域{},块内部定义的变量,在外部是不可以访问到的 使用let在f ...

  8. Codeforces Beta Round #34 (Div. 2)

    Codeforces Beta Round #34 (Div. 2) http://codeforces.com/contest/34 A #include<bits/stdc++.h> ...

  9. 语义SLAM的数据关联和语义定位(三)

    与现有方法的异同 特征点SLAM中的数据关联 先回忆一下特征点SLAM中,我们是如何处理数据关联的.下面以ORBSLAM为例. 在初始化部分,我们通过特征描述子的相似性,建立两帧之间的特征点关联,然后 ...

  10. mysql/mariadb基于ssl的主从复制

    当mysql/mariadb跨越互联网进行复制时别人可以窃取到mysql/mariadb的复制信息, 这些信息是明文的, 因此存在不安全性, 这里通过ssl对复制的信息进行加密 1. 创建证书中心 在 ...