Vuex综合
分类:计算机 | 前端 | Vue | Vuex 661
更新:2020-11-30 23:46:11编辑
转载地址
https://www.jianshu.com/p/120eaf50331c
揭开Vuex的神秘面纱
拿到一个工具,我们第一时间需要弄明白的,就是这个工具到底能够帮助我们解决什么问题。比如锤子,砸得了鸡蛋打得了电话,比如苹果,不但能吃还能玩。那么Vuex呢,如果把Vue.js比喻成路人(走路的人)的话,那么Vuex就是他的桑塔纳,如果他想去隔壁买包烟,那走过去就行了,开个车过去反而是一种负担,但是如果他想去几十公里的学校采花,那桑塔纳就得派上用场了,不然等他走过去,可能花都谢了。
当然,类比只是为了告诉我们Vuex的价值所在,那么在具体的实际应用中,它能干什么?什么时候才需要翻他的牌呢?我们先来看一段官方代码:
new Vue({
// state 数据源
data () {
return {
count: 0
}
},
// view 视图
template: `
<div>{{ count }}</div>
`,
// actions 事件
methods: {
increment () {
this.count++
}
}
})
这是一个简单的增长型计数功能页面,和Vue.js有一腿的,应该秒懂。通过increment方法实现count增长,然后渲染到页面上。
这种方式其实就跟走路买烟一样,属于短途效应,官方称作为【单向数据流】,很好理解。
但是,情况变了,现在有两个页面A和B,有以下两个要求:
- 要求它们都能对count进行操控。
- 要求A修改了count后,B要第一时间知道,B修改后,A也要第一时间知道。
怎么办?稍微有点开发经验的,就能够很容易地想到,把数据源count剥离开来,用一个全局变量或者全局单例的模式进行管理,这样不就在任何页面都可以很容易地获取到这个状态了吗。
猿导航
阅读排行榜
- 1vue和el-table使用经验-如何刷新表格数据6505
- 2uni-app使用经验—vue页面和html页面如何互相调用接口并传参3403
- 3nuxt.js项目中如何添加和使用全局变量1921
- 4如何用批处理命令(bat脚本)启动和停止windows服务1914
- 5nuxtjs asyncData使用经验—如何发起多个axios请求并携带参数1806
- 6Spring学习经验—@ResponseBody注解的使用说明1788
- 7Druid异常解决经验—java.sql.SQLException url not set1760
- 8解决SpringBoot使用maven下载不了jar包的问题1743
- 9Intellij IDEA下的版本控制VCS的启用与关闭1736
- 10linux如何成功地离线安装docker1618
- 11在Nuxt.js项目的head中引用外部js文件1586
- 12Nuxt.js项目实现路由鉴权和用户登录1575
- 13软件项目管理——详细设计说明书模板11537
- 14Windows中使用Nginx解决前后端分离部署中的跨域问题1479
- 15Element-UI学习经验——el-switch开关的用法1415