Vue84-Vuex的工作原理与搭建开发环境

一、vuex工作原理

  • stats:是一个object对象,里面有很多key-value,存放的就是要操作的数据。
  • mutations:是一个object对象,真正去操作stats的人。
  • actions的作用:是一个object对象,当一个动作对应的值需要发送ajax请求才能获取,则在actions中发送ajax请求。

实际上要操作的是,store提供的dispatch和commit函数。

当不需要发送ajax请求,也没有复杂的逻辑处理的时候,vuex允许不走actions,直接走multation。

目的:要让所有的组件实例对象都能看见store。

二、搭建vuex的开发环境

2-1、vuex的引入和使用

在main.js中引入和使用vuex

注意:

想要vm身上有新的属性,要引入和使用,否则随便写的话,vue是不认的!

只要vm身上有store,此时,所有的组件实例对象vc和vm都能有store。

store身上要有三个对象:actions、mutations、states;

store身上要有两个接口:dispatch、commit。

2-2、创建store

vue-cli的import问题:

即使import没有写在一起,vue-cli执行的时候也会把import汇总执行!

解决方式:

将vuex的引入和使用,放到store下的index.js文件中

三、小结

相关推荐
IPdodo_2 分钟前
curl 如何测试代理 IP?HTTP、SOCKS5 与认证参数示例
前端·网络·python·https·网络调试
honkun63 分钟前
vue 甘特图组件 vxe-gantt 配置拖拽调整任务起止日期时实时显示 Tooltip 提示
javascript·vue.js·甘特图·vxe-gantt
做前端的娜娜子3 分钟前
施工蓝图:vite.config.js —— 项目的指挥中心
前端·react native·vite
宸翰4 分钟前
解决uni-app 中 SVG 图片在 iOS 端显示模糊问题
前端·uni-app
数据掘金5 分钟前
第三方 SDK 集体故障时,你的 App 会怎样?可落地的监控与降级方案
前端
计算机毕设定制辅导-无忧学长5 分钟前
《基于SpringBoot的家政服务管理平台的设计与实现》
java·vue.js·spring boot·计算机毕业设计选题推荐·家政服务管理平台
AI分享猿15 分钟前
UI设计Prompt系列(十七):团队如何管理UI Prompt——减少产品、设计与开发之间的信息损耗
前端·prompt
资讯综合19 分钟前
2026全国云渲染网站排名 不同需求用户适配榜单
开发语言·前端·javascript
PHP实战开发录37 分钟前
PHP接口超时后为什么任务还在跑
开发语言·前端·php·开发
今天AI了吗1 小时前
2026年三大AI桌面智能体横评:Codex vs Hermes vs WorkBuddy
大数据·前端·css·人工智能·架构