数据流

为了更好地理解 Vuex app 中的数据流，我们来做一个简单的计数器 app。这个例子仅仅用于解释一些概念，实际上你并不需要在这种简单的场合使用 Vuex.

Setup

// vuex.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

定义 App State

const state = {
  count: 0
}

定义会被用到的 State Mutations

const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

定义可被调用的 Actions

const actions = {
  increment: 'INCREMENT',
  decrement: 'DECREMENT'
}

创建 Vuex 实例

export default new Vuex({
  state,
  mutations,
  actions
})

在 Vue 组件里使用

Template

<div>
  Clicked: {{ count }} times
  <button v-on:click="increment">+</button>
  <button v-on:click="decrement">-</button>
</div>

Script

import vuex from './vuex.js'

export default {
  computed: {
    // 在 computed 属性内绑定 state
    count () {
      return vuex.state.count
    }
  },
  methods: {
    increment: vuex.actions.increment,
    decrement: vuex.actions.decrement
  }
}

你会注意到组件本身非常简洁：它仅仅显示了 Vuex 实例中的一些 state、在用户输入时调用了一些 vuex actions.

You will also notice the data flow is unidirectional, as it should be in Flux:

???

data-flow.md 1.5 KB 文件歷史 原始文件

数据流