Vuex 小tip

HelKyle 发布于2019-08-22 13:55 / 1514人阅读

vuex基本使用和相关规范

dispatch提交action,commit提交mutation。dispatch是异步，commit 是同步

通过使用,import和mapActions 可以获取action的方法并且能够直接调用或重命名调用

只允许通过mutation 来变更state的状态（内容）

官方Action介绍

action介绍

    import {
        mapActions
    } from "vuex"
    
    ...mapActions({
        getListsData: "getListsData"
    })

使用的相关小技巧

可以通过this.$store.state.这种方法取到state里面的值并进行修改（不推荐）

dispatch和commit的时候，第二个参数可以带一个载荷，这是一个json，且不允许有第三个参数

一般将数据请求写在action中，如果对数据渲染有先后顺序的要求，可以将整个请求用promise return

    getShopData({ commit }, resData) {
        return axios.post(url, resData).then((res) => {
            commit("getShopData", res)
            commit("displayPoints")
            commit("setShopScore", res.data.shopDetail.recommendScore)
            commit("getShopDetailIntro")
        })
    }

这种方法一般是和页面直接引入action函数时连用

    _this.getShopData().then()

建议

vuex虽然使用起来特别方便，但是对于小型项目，组件划分不要太细

提交状态尽量按照标准写法来提交，不要直接修改状态

私有云海外云主机小tips层 js Vuex vuex cdn Vue_Vuex

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92618.html

使用Vue快速开发单页应用－功能组件与路由组件通信

摘要：展示信息展示时间结束后，执行回调函数如果有上面就完成了组件的整套逻辑，最后我们还需要把组件挂在。原文链接其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode showImg(https://segmentfault.com/image?src=http://7fvhwe.com1...

KitorinZero 2019-08-14 14:33 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

VishKozus 2019-08-23 13:49 评论0 收藏0
【开源】小程序And公众号商城，外加后台，功能齐全！

摘要：前言一个集微信公众号商城小程序商城商城后台的一个开源项目，后台是基于开发的，是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发多公众号管理配置简单。微信小程序项目下载整个包之后，进行根目录文件夹。前言一个集微信公众号商城/小程序商城/商城后台的一个开源项目，后台是基于WeiPHP5.0开发的，WeiPHP是一个简洁而强大的开源微信公众平台开发框架，微信功能插件化开发,多...

linkFly 2019-07-01 11:00 评论0 收藏0
使用Vue快速开发单页应用－主体结构

摘要：本文以及后面相应文章，主要是相关技术栈来快速的实现单页应用开发。原文出处其他使用快速开发单页应用主体结构使用快速开发单页应用使用快速开发单页应用登录页面使用快速开发单页应用功能组件与路由组件通信本文所涉及代码全在vue-cnode 单页应用，即在一个页面集成系统中所有功能，整个应用只有一个页面。因为路由的控制在前端，单页面应用在页面切换时比传统页面更快，从而在前端体验更好。将逻辑从...

dcr309duan 2019-08-20 10:29 评论0 收藏0
美团小程序框架mpvue入门教程

摘要：美团小程序框架入门教程自打写了美团小程序框架蹲坑指南一发不可收拾，今天趁周末空闲，来写个没朋友的简单入门教程，本教程只针对新手，老鸟勿喷。美团小程序框架mpvue入门教程自打写了美团小程序框架mpvue蹲坑指南,一发不可收拾，今天趁周末空闲，来写个mpvue(没朋友)的简单入门教程，本教程只针对新手，老鸟勿喷。另外，我还专门为本文做了一个简单的项目，如果懒得从头开始搭项目的童鞋...

YorkChen 2019-08-22 16:14 评论0 收藏0