ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vuex使用方法

2021-06-02 13:31:57  阅读:173  来源: 互联网

标签:changeStataData 数据 vuex state params mutation 使用 action 方法


安装

参考官网:https://vuex.vuejs.org/zh/installation.html

vuex的五大核心

  • state:存放公用数据
  • action:存放异步操作,不能直接修改state中的数据,通过dispatch触发action,action会有两个参数,参数一:context,使用里面的commit方法触发mutation,参数二:params传递过来要修改的数据值
  • mutation:存放同步操作,修改state中的数据,参数一为state,参数二为params要修改的数据值
  • getter:类似于vue的计算属性,当一个数据依赖于另一个数据时使用
  • module:模块化管理

使用顺序

1、组件内通过this.$store.dispatch(“changeStataData”, 18)调用action
2、action中监听传递过来的事件changeStataData(context, params),通过context.commit("changeStataData", params)调用mutation,mutation中对state数据进行修改
3、mutation中修改数据:changeStataData(state, params) { state.data = params }
ps:一般批量同步操作以及异步操作建议调用顺序为:action ==> mutation,若是数据量比较少的同步操作,则可以直接在组件内使用commit调用mutation修改数据

在这里插入图片描述

标签:changeStataData,数据,vuex,state,params,mutation,使用,action,方法
来源: https://blog.csdn.net/weixin_52073113/article/details/117465041

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有