Vuex简单入门操作

1.什么是Vuex

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

2.Vuex的流程

让我们通过一个简单的实际例子来理解怎样使用 Vuex。（这个例子里，我们要实现一个按钮，每点击它一次，计数器加一）下面让我们看一下Vuex的操作流程：
我们假定这个例子使用以下三个组件：
components/App.vue
根组件，它包含了两个另外的子组件：
Display 显示当前计数器的值
Increment 使计数器加一的按钮

第一步：加入store

store 存储应用所需的数据。所有组件都从 store 中读取数据。
建一个新文件 vuex/store.js

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

Vue.use(Vuex)

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

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

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

修改 components/App.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 连接
}

第二步：创建action

action 是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数，来触发对 store 的更新。
创建一个新文件 vuex/actions.js，然后写入一个函数 incrementCounter：

// action 会收到 store 作为它的第一个参数
export const incrementCounter = function ({ dispatch, state }) {
  dispatch('INCREMENT', 1)
}

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

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

<script>
import { incrementCounter } from '../vuex/actions'
export default {
  vuex: {
    actions: {
      increment: incrementCounter
    }
  }
}
</script>

第三步：创建 state 和 mutation

修改 vuex/store.js：

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

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

第四步：使用getters函数在组件获取值

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

// 这个 getter 函数会返回 count 的值
// export const getCount = state => state.count

export function getCount (state) {
  return state.count
}

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

修改 components/Display.vue：

<template>
  <div>
    <h3>Count is {{ counterValue }}</h3>
  </div>
</template>

<script>
import { getCount } from '../vuex/getters'
export default {
  vuex: {
    getters: {
      // 注意在这里你需要 `getCount` 函数本身而不是它的执行结果 'getCount()'
      counterValue: getCount
    }
  }
}
</script>

第五步：运行…

最后一步就是需要去运行你的应用了，感兴趣的同学可以进行更深入的操作，进一步加深对Vuex的理解。