本文只介绍概念的延伸和核心配置，对于vuex 各部分的概念， 已经写的足够清晰简洁。

1、vuex 是什么

基础概念

Vue 的状态管理模式，集中存储管理应用的所有组件的状态。

vuex的核心

vuex 是 架构的一种实现。Flux 的核心是单向流动：

Flux 架构对标 MVC 框架：

views -> store.action      -> mutations  -> stateviews -> controller.action -> model      -> database

个人理解

vuex 特性的两个关键字：集中和统一。

• 集中是指组件共享的状态集中管理。
• 统一是指改变状态使用统一的调用。

集中可以解决多个组件依赖同个状态的情况，统一则有利于调试。

2、vuex 何时用

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

3、 vuex 基本配置

以下配置只应用于小型开发中，大型系统需要将各模块分离成不同的文件分别配置。

安装

# npm 安装npm install vuex --save# yarn 安装 yarn add vuex

使用

新建 store/index.js 文件，代码如下

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({    state: {        todos: [          { id: 1, text: '...', done: true },          { id: 2, text: '...', done: false }        ]    },    mutations: {       increment (state, payload) {        state.count += payload.amount      }     },    actions: {            },     // 可以理解为 store 的计算属性    getters: {       doneTodos: state => {          return state.todos.filter(todo => todo.done)        }     }});export default store

在 main.js 中引入store

import store from './store'new Vue({  router,  // 从根实例中注入，该store实例会注入到根组件下的所有子组件中。  store,  render: h => h(App)});