到底vuex是什么?

74

广告

Vue.js小书已经出版,尤小右作序推荐:http://www.ituring.com.cn/boo...
欢迎购买。
Swift iOS 小书 http://www.ituring.com.cn/boo...

正文

关于vuex类的新闻最近很多,看到眼热就去查了下资料,然后扯出来一堆flux、redux、state、state之类的概念,以及大型工程必要性之类的。看官方手册也是昏昏然。

然而,我还是弄懂了!我准备从demo出发,以同样的一个最简单的demo,演示两种情况下的代码编写情况:

  1. 单纯依赖于vue.js

  2. 依赖vue.js,也使用了vuex技术

目的是通过对比引出vuex的概念、优势和劣势。也许这是目前最接地气的vuex的介绍吧:)。所以无论如何在了解vuex之前,你必须懂得vue.js(好像废话:)。现在开始。

假设一个微小的应用,有一个标签显示数字,两个按钮分别做数字的加一和减一的操作。用户界面看起来是这样的:

clipboard.png

使用vue的话,就是这样:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>
new Vue({
  el:'#app',
  data () {
    return {
      count: 0
    }
  },
  methods: {
    inc () {
      this.count++
    },
    dec () {
      this.count--
    }
  }
})
</script>

我写的代码代码可以直接拷贝到你的html内并且打开执行,你可以不费多余的劲儿,就把应用跑起来,按按按钮,看看界面上的反应是否如你预期。

整个代码结构非常清晰,代码是代码,数据是数据,这也是我一直以来非常喜欢vue.js的重要原因。代码就是放在methods数组内的两个函数inc、dec,被指令@click关联到button上。而data内返回一个属性count,此属性通过{{count}}绑定到标签p内。

现在来看看,同样的demo app,使用vuex完成的代码的样子,再一次,如下代码不是代码片段,是可以贴入到你的html文件内,并且直接使用浏览器打开运行的。

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@next"></script>
<div id="app">
  <p>{{count}}
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </p>
</div>
<script>

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
      inc: state => state.count++,
    dec: state => state.count--
  }
})

const app = new Vue({
  el: '#app',
  computed: {
    count () {
        return store.state.count
    }
  },
  methods: {
    inc () {
      store.commit('inc')
    },
    dec () {
        store.commit('dec')
    }
  }
})
</script>

我们先看到有哪些重要的变化:

  1. 新的代码添加了对vuex@next脚本的依赖。这是当然的,因为你需要使用vuex的技术,当然需要引用它

  2. methods数组还是这两个方法,这和demo1是一样的;但是方法内的计算逻辑,不再是在函数内进行,而是提交给store对象!这是一个新的对象!

  3. count数据也不再是一个data函数返回的对象的属性;而是通过计算字段来返回,并且在计算字段内的代码也不是自己算的,而是转发给store对象。再一次store对象!

就是说,之前在vue实例内做的操作和数据的计算现在都不再自己做了,而是交由对象store来做了。这突然让我想到就先餐厅现在都不在洗碗了,都交给政府认证的机构来洗了。

说回正题。store对象是Vuex.Store的实例。在store内有分为state对象和mutations对象,其中的state放置状态,mutations则是一个会引发状态改变的所有方法。正如我们看到的,目前的state对象,其中的状态就只有一个count。而mutations有两个成员,它们参数为state,在函数体内对state内的count成员做加1和减1的操作。

活还是那些活,现在引入了一个store对象,把数据更新的活给揽过去,不再需要vue实例自己计算了,代价是引入了新的概念和层次。那么好处是什么(一个土耳其古老的发问)?

vuex解决了组件之间共享同一状态的麻烦问题。当我们的应用遇到多个组件共享状态时,会需要:

  1. 多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。这需要你去学习下,vue编码中多个组件之间的通讯的做法。

  2. 来自不同组件的行为需要变更同一状态。我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。

以上的这些模式非常脆弱,通常会导致无法维护的代码。来自官网的一句话:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态。这里的关键在于集中式存储管理。这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了。问题就自然解决了。

这就是为什么官网再次会提到Vuex构建大型应用的价值。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex

关于

作者:刘传君

创建过产品,创过业。好读书,求甚解。
可以通过 1000copy#gmail.com 联系到我

出品

bootstrap小书 https://www.gitbook.com/book/...
http小书 http://www.ituring.com.cn/boo...
Git小书 http://www.ituring.com.cn/boo...
Vue.js小书 http://www.ituring.com.cn/boo...


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

42 条评论
hasbug · 2017年01月10日

今天看了一上午的官方文档,看打瞌睡了

+7 回复

0

同道中人啊,看着看着就像睡觉,尼玛,程序猿写的文档真是难看

timerainbow · 2017年10月31日
Songlairui · 2016年11月18日

刚看完vue文档基本部分,看这个恰好接上

+2 回复

AZmake · 2016年11月18日

感谢楼主,终于弄懂这句话“Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态” 的本意了

+2 回复

诗人的咸鱼 · 2016年11月18日

请教个问题.我使用vuex的场景一直是在数据管理方面.增删改查数据,进而引发界面的变动.一切的变动都是由数据驱动的.
但是如果有一个场景:a组件要通知b组件打开一个dialog.这用vuex怎么实现?
eventbus的话,就是一个发广播,一个监听,我能理解.但是不明白vuex要怎么实现?

+2 回复

0

在a组件引入vue,var b = vue.component("b")这就是b组件了。这是官方的方法,我还有偏方不告诉你。

叶的鱼 · 2018年02月04日
tubrorock · 2016年12月11日

请教一下,在使用vuex之后对state中的数据进行双向绑定除了在计算属性中加一个setter函数之外,还有其他方式不?

+2 回复

1000copy 作者 · 2017年01月10日

官方文档要求你懂flux,redux等。所以容易看昏。

+2 回复

AIBBSHINBAJI · 2017年06月21日

这说法感觉就一个全局变量的作用

+2 回复

0

我感觉也是这个意思

sugus · 2017年11月08日
gthank · 2016年11月17日

简单易懂,赞一个

回复

thedb2333 · 2016年12月04日

可以在data内设置一个函数对象($watch也可以),监听state内某个你改变的值,然后在mounted内改变就可以了

回复

前端小白de窝 · 2016年12月05日

多谢题主,受教了

回复

hasbug · 2017年01月10日

刚好都不懂,哈哈

回复

CCcherry · 2017年02月07日

看了这个简明的例子和后面的解说,确实有了更深的一层理解。感谢分享。

回复

线上猛如虎 · 2017年02月24日

up的小书有点贵,能否降价?而且排版略差....也没pdf

回复

learnmeahaskell · 2017年03月02日

好文已推荐
官方文档看了有点迷糊 现在清楚了些

回复

南瓜马车 · 2017年04月24日

果然是最接地气的介绍 一看就懂

回复

Fyerl · 2017年05月23日

好文

回复

大大果 · 2017年06月05日

一个字:好! 昨天看来一天的官方文档看得睡着了,今天看了十分钟就搞定了 真心赞一个

回复

冯fhw · 2017年06月07日

很不错,看官方文档很晕- -看完这边稍微好一点,还是得实践下慢慢弄懂

回复

冰糖雪梨 · 2017年06月23日

看来看去还是看不懂,看不懂所谓的状态管理
怎么看都是数据管理。

回复

0

对,我看也像是数据管理。可能是因为使用vuex,数据是响应式的,所以叫状态管理吧。

jst_coing · 4月17日
青棘 · 2017年07月12日

若若的问一句 你这红字是怎么弄出来的

回复

0

用反引号包围,red text

1000copy 作者 · 2017年07月13日
0

@1000copy 哈哈哈哈哈red text 红了吗

流浪到沙滩 · 2017年07月24日
0

@流浪到沙滩 哈哈哈

流浪到沙滩 · 2017年07月24日
载入中...