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

三、小结

相关推荐
止观止1 分钟前
不止解构:深入掌握 ES6+ 对象与函数的高级语法糖
前端·javascript·es6
C_心欲无痕4 分钟前
react - useTransition标记低优先级更新
前端·react.js·前端框架
捻tua馔...7 分钟前
antd3的表单实现(HOC解决方案)
前端·javascript·react.js
支付宝体验科技9 分钟前
支付宝 KJS Compose 动态化方案与架构设计
前端·客户端
AllinLin20 分钟前
JS中的call apply bind全面解析
前端·javascript·vue.js
阿乐去买菜24 分钟前
2025 年末 TypeScript 趋势洞察:AI Agent 与 TS 7.0 的原生化革命
前端
海绵宝龙29 分钟前
Vue 中的 Diff 算法
前端·vue.js·算法
zhougl99630 分钟前
vue中App.vue和index.html冲突问题
javascript·vue.js·html
袁煦丞 cpolar内网穿透实验室36 分钟前
无需公网 IP 也能全球访问本地服务?cpolar+Spring Boot+Vue应用实践!
vue.js·spring boot·tcp/ip·远程工作·内网穿透·cpolar
浩泽学编程40 分钟前
内网开发?系统环境变量无权限配置?快速解决使用其他版本node.js
前端·vue.js·vscode·node.js·js