vuex文档阅读学习1

最新推荐文章于 2025-09-08 17:59:21 发布

weixin_34377065

最新推荐文章于 2025-09-08 17:59:21 发布

阅读量75

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/2016jyh/blog/865411

2019独角兽企业重金招聘Python工程师标准>>>

文档

##1. 下载使用在 Vue 之后引入 vuex 会进行自动安装：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

##2.Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

状态（可以简单理解为数据吧）
集中式
可以测

##3. 什么是“状态管理模式”？

让我们从一个简单的 Vue 计数应用开始：

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

这个状态自管理应用包含以下几个部分：

state，驱动应用的数据源；

view，以声明方式将state映射到视图；

actions，响应在view上的用户输入导致的状态变化。

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

##4. 单向数据流动的不足

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

1.多个视图依赖于同一状态。

2.来自不同视图的行为需要变更同一状态。

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

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

##5.全局单例模式管理

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

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

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

全局单例模式管理

转载于:https://my.oschina.net/2016jyh/blog/865411