为什么要使用Vuex的介绍

这篇文章主要为大家详细介绍了为什么要使用Vuex的介绍，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

 

单向数据流

 

以下是一个表示“单向数据流”理念的极简示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

• - 多个视图依赖于同一状态。
• - 来自不同视图的行为需要变更同一状态。

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。

对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

这就是 Vuex 背后的基本思想，借鉴了 Flux、Redux、和 The Elm Architecture。与其他模式不同的是，Vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。

 

什么情况下应该使用 Vuex？

 

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：

Flux 架构就像眼镜：您自会知道什么时候需要它。

 

如果没有使用Vuex

 

假设有这样的两个页面，数据一样，就是页面布局不一样：

【图片暂缺】

【图片暂缺】

 

代码

 

Page1.vue

代码如下：

<template>
  <div>
    <h2>我是第一个页面</h2>
    <ul class="ul_list">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">价格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '赣州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山东大枣',
            price: '3.2'
          },
          {
            name: '阳澄湖大闸蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

Page2.vue

代码如下：

<template>
  <div>
    <h2>我是第二个页面</h2>
    <ul class="ul_list page2">
      <li v-for="item in items">
        <p class="name">商品：{{item.name}}</p>
        <p class="price">价格：￥{{item.price}}</p>
      </li>
    </ul>
  </div>
</template>
<script>
 export default {
   data() {
    return {
        items: [
          {
            name: '赣州橙子',
            price: '8.8'
          },
          {
            name: '新疆哈密瓜',
            price: '2.0'
          },
          {
            name: '山东大枣',
            price: '3.2'
          },
          {
            name: '阳澄湖大闸蟹',
            price: '10.0'
          }
        ]
    }
   },
  }
</script>

现在我们可以看见上面两个页面里面的数据是一样的。同一份数据，我们在两个页面里面操作两次感觉还行，如果有10个，20个 ……页面需要这样，那么这就是一个让人奔溃的事情，而且数据的同步刷新也很痛苦。所以就需要Vuex了。简言之：vuex就是将数据共享给多个组件共同使用，同时也将这个数据的状态进行了共享（一个组件改变这个数据的状态其它组件也跟着改变）。

 

Vue官网对Vuex的解释：

 

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

 

总结

 

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对四海网的支持。如果你想了解更多相关内容请查看下面相关链接

本文来自：http://www.q1010.com/184/7038-0.html

注：关于为什么要使用Vuex的介绍的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js