loading...

0

vuex小demo

其他读完大概需要13分钟

  • 发布时间:2017-09-07 12:14 星期四
  • 刘伟波
  • 135
  • 更新于2017-09-07 12:14 星期四

什么是Vuex?http://www.jianshu.com/p/490e7726fe67

Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构,它借鉴了 Flux 和 Redux的设计思想,但简化了概念,并且采用了一种为能更好发挥 Vue.js 数据响应机制而专门设计的实现。

我为什么需要它?

当你的应用还很简单的时候,你多半并不需要 Vuex。也不建议过早的使用 Vuex。但如果你正在构建一个中型以上规模的 SPA,你很有可能已经需要思考应该如何更好的归纳 Vue 之外,应用的其他组成部分。这就是 Vuex 要大显身手的时刻。

我们在单独使用 Vue.js 的时候,通常会把状态储存在组件的内部。也就是说,每一个组件都拥有应用状态的一部分,整个应用的状态是分散在各个角落的。然而,我们经常会需要把状态的一部分共享给多个组件。一个常见的解决策略为: 使用定制的事件系统,让一个组件把一些状态“发送”到其他组件中。这种模式的问题在于,大型组件树中的事件流会很快变得非常繁杂,并且调用时很难去找出究竟哪里出错。

为了更好的解决在大型应用中状态的共用问题,我们需要对组件的 组件本地状态(component local state) 和 应用层级状态(application level state) 进行区分。应用级的状态不属于任何特定的组件,但每一个组件仍然可以监视(Observe)其变化从而响应式地更新 DOM。通过汇总应用的状态管理于一处,我们就不必到处传递事件。因为任何牵扯到一个以上组件的逻辑,都应该写在这里。此外,这样做也能让我们更容易地记录并观察状态的变更(Mutation,原意为突变),甚至可以实现出华丽如时光旅行一般的调试效果。(译注:是时候安利一波 vue-devtools 了)

Vuex 也对如何管理分撒各地的状态增加了一些约束,但仍保留有足够面对真实使用场景的灵活性。

准备开始

每一个 Vuex 应用的核心就是 store(仓库)。"store"基本上就是一个容器,它包含着你应用里大部分的 状态(即 state).Vuex 和单纯的全局对象有以下两点不同:

  1. Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到更新。
  2. 你不能直接改变 store 中的状态,改变 store 中的状态的唯一途径就是显示地分发 状态变更事件(explicitly dispatching mutations)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
最简单的store
注意:我们将会在后续的文档中用 ES2015 语法进行案例展示。如果你还没能掌握 ES2015,你得抓紧了!本文同样假设你已经了解了 Vue 本体的官方文档中构建大型应用章节所涉及的概念.

创建 Vuex store 的过程相当直截了当 - 只要提供一个初始化的 state 对象,以及一些 mutations:

import Vuex from 'vuex'

const state = {
    count: 0
}

const mutations = {
    increment (state, amount) {
        state.count += amount
    }
}

export default new Vuex.Store({
    state,
    mutations
})

现在,你可以通过 store.state 来读取 state 对象,还可以通过 store.commit 某 mutation 的名字来触发这些状态变更:

store.commit('increment')
console.log(store.state.count) // -> 1

再次强调,我们通过分发 mutation 的方式,而非直接改变 store.state.count,是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显,这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外,这样也让我们有机会去实现一些能记录每次状态改变,保存状态快照的调试工具。有了它,我们甚至可以实现如时间穿梭般的调试体验。

以上只是一个用来展示 store 究竟是什么的一个极简例子。但是 Vuex 可不仅仅是状态存储。接下来,我们将会更深入地探讨一些核心概念:State(状态)Mutations(变更)和 Actions(动作)

简单教程

让我们通过一个简单的实际例子来理解怎样使用 Vuex。这个例子里,我们要实现一个按钮,每点击它一次,计数器加一。


image

我们会通过这个例子解释相应的概念,以及 Vuex 所要解决的问题:如何管理一个包含许多组件的大型应用。我们假定这个例子使用以下三个组件:

components/index.vueindex 组件,它包含了两个另外的子组件:

  • Display 显示当前计数器的值
  • Increment 使计数器加一的按钮
<template>
  <div>
    <Display></Display>
    <Increment></Increment>
  </div>
</template>

<script>
import Display from './display'
import Increment from './increment'

export default {
  components: {
    Display: Display,
    Increment: Increment
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

components/display.vue

<template>
    <div>
        <h4>Count is 0</h4>
    </div>
</template>

<script>
    export default {}
</script>

components/increment.vue

<template>
    <div>
        <button>Increment +1</button>
    </div>
</template>

<script>
  export default {

  }
</script>
在没有 Vuex 的日子里
  • Increment 与 display 彼此无法感知到彼此的存在,也无法相互传递消息。是怎样的孤独。
  • App 将必须通过事件(events) 与广播(broadcasts)与其他两个组件进行协调。
  • 而 App 作为两者之间的协调者,导致这些组件并没法被服用,被迫紧密耦合。调整应用的结构,则可能导致应用崩溃。
Vuex 的流程

我们需要依次执行这些步骤:


image

仅仅为了增加计数而采取这么多步骤显然很多余。但请注意,这些概念的引入是为了构建大型应用,提高可维护性,降低调试与长期维护的难度而设计的。(译注:换言之,这是屠龙刀,拿来杀鸡只是为了让我们好懂)好,那么接下来我们就用 vuex 来进行重构吧!

第一步:加入 store

store 存储应用所需的数据。所有组件都从 store 中读取数据。在我们开始之前,先用 npm 安装 vuex

$ npm install --save-dev vuex

建议一个新文件 vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'

// 使用 vuex
Vue.use(Vuex)

// 创建一个对象来保存应用启动时的初始状态
const state = {
    // TODO 放置初始状态
}

// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
    // TODO 放置我们的状态变更函数
}

// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以链接到我们的应用中
export default new Vuex.Store({
  state, mutations
})

我们需要修改 index 组件来让应用注意到 store 的存在位置。

修改 components/index.vue,注入 store。

import Display from './Display.vue'
import Increment from './IncrementButton.vue'
import store from '../vuex/store' // import 我们刚刚创建的 store

export default {
  components: {
    Display: Display,
    Increment: Increment
  },
  store: store // 在根组件加入 store,让它的子组件和 store 连接
}
提示: 如果使用 ES6 和 babel 你可以这样写:components: { Display, Increment, }, store
第二步:创建 action

action 是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数,来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。

创建一个新文件 vuex/actions.js,然后写入一个函数 incrementCounter:

// 既然我们只对事件的分发(dispatch 对象)感兴趣。(state 也可以作为可选项放入)
// 我们可以利用 ES6 的解构(destructuring)功能来简化对参数的导入
// action 会收到 store 作为它的第一个参数
export const increment = function ({ commit, state }) {
  commit('increment', 1) //
}

然后我们从 component/increment.vue 组件里调用 action 函数

<template>
    <div>
        <button @click='increment'>Increment +1</button>
    </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
    methods: {
      ...mapActions([
        'increment'
      ])
    }
  }
</script>

回顾一下我们刚刚添加的内容背后所潜藏的一些有趣的点:

我们有了一个新对象 vuex.actions,包含着新的 action;我们没有指定特定的 store,object,state 等等。Vuex 会自动把它们串联起来;我们可以用 this.increment() 在任何方法中调用此 action;我们也可以通过 @click 参数调用它,与使用其他普通的 Vue 组件方法并无二致;我们给 action 起名叫 incrementCounter,但是在具体使用时,我们可以根据需要进行重新命名。
第三步:创建 state 和 mutation

在我们 vuex/actions.js 文件里我们 dispatch 了一个叫做 INCREMENT 的 mutation,但是我们还没有写它所对应的具体操作。我们现在就来做这个事情。

修改 vuex/store.js

const state = {
    // 应用启动时, count置为0
    count: 0
}

const mutation = {
    // mutation的第一个参数是当前的state 
    // 你可以在函数里修改 state
    increment (state, amount) {
        state.count = state.count + amount
    }

}
第四步:在组件获取值

创建一个新的文件 vuex/getters.js

// 这个 getter 函数会返回 count 的值
// 在 ES6 里你可以这样写
// export const getCount = state => state.count
export function getCount (state) {
    return state.count
}

这个函数返回了 state 对象里我们所需要的部分--count 的值。我们现在在组件里加入这个 getter 函数。

修改 component/display.vue:

<template>
  <div>
    <h4>Count is {{ getCount }}</h4>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters([
        'getCount'
      ])
    }
  }
</script>

这里我们又加入了一个新的对象 vuex.getters。它将 counterValue 绑定到了 getCount 这个 getter 函数上。我们给它起了一个新名字来使得这个变量在你的组件里表意更明确。

你可能有点困惑——为什么我们需要用 getter 函数而不是直接从 state 里读取数据。这个概念更多的是一种最佳实践,在大型应用里更加适用。它有这么几种独特优势:

  1. 我们可能需要使用 getter 函数返回需经过计算的值(比如总数,平均值等);
  2. 在大型应用里,很多组件之间可以服用同一个 getter 函数;
  3. 如果这个值的位置改变了(比如从 store.count 变成了 store.counter.value),你只需要改一个 getter 方法,而不是一堆组件。

以上便是使用 getter 带来的好处。

第五步:接下来……

运行一下你的应用,它应该能正常工作了。

要更深入地理解 Vuex,你可以尝试以下挑战,对该应用进行少许修改,权当练习,嗯~

  • 加一个“减一”的按钮。
  • 安装 VueJS Devtools,尝试使用它提供的 Vuex 工具来观察 mutation 是如何生效的。
  • 添加一个名为 IncrementAmount 的文本框组件,让用户可以输入要增加的数值。这个可能会稍有难度,因为表单在 vuex 中与原生的表现稍有不同。可以读一下表单处理章节了解更多内容。


你可能感兴趣的文章

    发表评论

    评论支持markdown,评论内容不能超过500字符,如果内容过多或者要及时回复,建议去 平台,一般一天之内就会回复。
    关于技术问题或者有啥不懂的都可以留言,我会定期回复答 疑,推荐最新仓库 前端知识体系, 感謝支持!