9月7日-8日,相约 2023 腾讯全球数字生态大会!聚焦产业未来发展新趋势! 了解详情
写点什么

Vue 组件化开发之 Vuex 了解一下(二)

  • 2020-01-10
  • 本文字数:760 字

    阅读完需:约 2 分钟

Vue 组件化开发之 Vuex 了解一下(二)

Vuex 的组成部分

完整的应用 Vuex 开发的应用结构应该是这样的:


Vuex 核心部分说明

State


State 负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入 store 对象,后期就可以使用 this.$store.state 直接获取状态


//store 为实例化生成的


import store from’./store’


new Vue({


el: ‘#app’,


store,


render: h => h(App)


})


这个 store 可以理解为一个容器,包含着应用中的 state 等。实例化生成 store 的过程是:


const mutations = {…};


const actions = {…};


const state = {…};


Vuex.Store({


state,


actions,


mutation


});


后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用 this.$store.state 获取,当然,也可以利用 vuex 提供的 mapState 辅助函数将 state 映射到计算属性中去,如


//我是组件


import {mapState} from ‘vuex’


export default {


computed: mapState({


count: state => state.count


})


}

Mutations

Mutations 的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值 state。store.commit(mutationName)是用来触发一个 mutation 的方法。需要记住的是,定义的 mutation 必须是同步函数,否则 devtool 中的数据将可能出现问题,使状态改变变得难以跟踪。


const mutations = {


mutationName(state) {


//在这里改变 state 中的数据


}


}


在组件中触发:


//我是一个组件


export default {


methods: {


handleClick() {


this.$store.commit(‘mutationName’)


}


}


}


或者使用辅助函数 mapMutations 直接将触发函数映射到 methods 上,这样就能在元素事件绑定上直接使用了。如:


import {mapMutations} from’vuex’


//我是一个组件


exportdefault {


methods: mapMutations([


‘mutationName’


])


}


本文转载自 Think 体验设计公众号。


原文链接:https://mp.weixin.qq.com/s/tIxET_5qhollePtyYRbXvw


活动推荐:

2023年9月3-5日,「QCon全球软件开发大会·北京站」 将在北京•富力万丽酒店举办。此次大会以「启航·AIGC软件工程变革」为主题,策划了大前端融合提效、大模型应用落地、面向 AI 的存储、AIGC 浪潮下的研发效能提升、LLMOps、异构算力、微服务架构治理、业务安全技术、构建未来软件的编程语言、FinOps 等近30个精彩专题。咨询购票可联系票务经理 18514549229(微信同手机号)。

2020-01-10 11:50455

评论

发布
暂无评论
发现更多内容

【云计算】私有云是什么?主要集中在哪些行业?与公有云有什么区别?

行云管家

云计算 公有云 私有云

netty系列之:从零到壹,搭建一个SOCKS代理服务器

程序那些事

Java Netty 程序那些事 SOCKS 12月日更

技术教程 | 在线 KTV 实现过程(内附demo体验)

ZEGO即构

Java 音视频 在线KTV实现教程

只需一步,轻松用Python实现线性规划

Java全栈架构师

Python 数据库 程序员 面试 线性规划

数据有了,如何构建数据资产?

百度开发者中心

大数据

Linux网络管理技术-OSI七层模型和TCP四层模型

学神来啦

Linux 运维 TCP/IP syn OSI七层协议

浅谈大型商城的订单系统设计方案

北游学Java

Spring Boot 订单管理 Java、 项目 商城项目

KubeCube 用户管理与身份认证

网易数帆

GitHub Kubernetes JWT Oauth kube

Linux学习分享之标准大页和透明大页

@零度

Linux

【docker 总结】第五篇 - 制作镜像、数据盘

Brave

Docker 12月日更

我是如何把vue项目启动时间从70s优化到7秒的

CRMEB

国家质量基础设施NQI一站式服务平台系统开发建设方案

a13823115807

系统开发 质量基础设施“一站式” 平台建设

ONES 解码:为何数字化是“超级工程”

万事ONES

数字化 ONES

XTransfer技术部门福利一览:判断一家公司能不能待,就看这3点

XTransfer技术

福利 求职 招聘 跨境支付

【日常工作】配置中心JVM堆外内存异常增长

MindController

为什么需要会计CRM系统?

低代码小观

低代码 企业管理系统 ERP CRM系统

如何提升软件测试思维?

和牛

软件测试 测试 测试右移

如何满足大数据集群服务功能真实需求?

星环科技

30万人追更,年度重磅Go图书出版,百万流量博主带你学习Go底层原理

图灵教育

编程 Go 语言

一个有生命力的开源社区应该是怎么样?

科技热闻

超大超详细图解,让你掌握Spark memeoryStore内存管理的精髓

华为云开发者联盟

Java spark 内存管理 Spark memeory Store memory Store

百万人都在求的网络安全学习路线,渗透漏洞防御总结(附图)

网络安全学海

网络安全 信息安全 渗透测试 WEB安全 漏洞扫描

一图看懂软件缺陷检查涉及的内容

华为云开发者联盟

安全 软件开发 软件缺陷 缺陷漏洞 防护

人和人差距是如何产生的

卢卡多多

28天写作 12月日更

【签约计划第二季】正式评审环节入选名单公布

InfoQ写作社区官方

签约计划第二季 热门活动

【堡垒机】云堡垒机价格是多少?有几种计费模式?

行云管家

云计算 网络安全 等级保护 过等保

小程序下一破局点?钉钉小程序卡片,应用与平台的深度集成

蚂蚁集团移动开发平台 mPaaS

前端 钉钉 移动开发 卡片技术

从MongoDB迁移到TDengine后,成本显著下降

TDengine

数据库 tdengine 时序数据库 后端技术

星环云原生数据湖,为企业精准决策提供全方位技术支撑

星环科技

技术揭秘!百度Geek说年度优质技术干货合集

百度Geek说

技术专题合集

查询优化技术解读:以分布式搜索引擎 Transwarp Scope为例

星环科技

  • 扫码添加小助手
    领取最新资料包
Vue 组件化开发之 Vuex 了解一下(二)_语言 & 开发_Think体验设计_InfoQ精选文章