Vuex综合

分类:计算机 | 前端 | Vue | Vuex 328
更新: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,有以下两个要求:

  1. 要求它们都能对count进行操控。
  2. 要求A修改了count后,B要第一时间知道,B修改后,A也要第一时间知道。

怎么办?稍微有点开发经验的,就能够很容易地想到,把数据源count剥离开来,用一个全局变量或者全局单例的模式进行管理,这样不就在任何页面都可以很容易地获取到这个状态了吗。