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文件中

三、小结

相关推荐
To_OC9 小时前
别再串行写 await 了,Promise.all 才是并行请求的正确打开方式
前端·javascript·promise
vipbic9 小时前
中后台越做越乱后,我用插件化把它救回来了
前端·vue.js
Hyyy9 小时前
Computer Use 适合做什么,不适合做什么——一次真实使用后的思考
前端
小和尚同志10 小时前
前端 AI 单元测试思考与落地
前端·人工智能·aigc
invicinble11 小时前
c端系统,其实更像一个信息展示平台
前端
李姆斯12 小时前
管理是否可以被完全量化
前端·产品经理·团队管理
名字还没想好☜12 小时前
Next.js 中间件实战:鉴权、重定向与 A/B 分流
开发语言·前端·javascript·中间件·react·next.js
广州灵眸科技有限公司13 小时前
瑞芯微RV1126B开发板(EASY-EAI-PI2) INI文件操作
java·前端·javascript·网络·人工智能
kaiking_g13 小时前
vue项目中,静态导入 vs 动态导入 详解
前端·javascript·vue.js
江华森13 小时前
Web 开发基础:HTTP 与 REST
前端·网络协议·http