由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。为了解决这个问题，Vue 提供 vuex。
vuex 甚至集成到 vue-devtools，无需配置即可进行时光旅行调试。
经常被忽略的是，Vue 应用中原始数据对象的实际来源 。
当访问数据对象时，一个 Vue 实例只是简单的代理访问。
所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享：
const sourceOfTruth = {}const vmA = new Vue({ ?data: sourceOfTruth})const vmB = new Vue({ ?data: sourceOfTruth})
子组件的实例可以通过this.$root.$data来访问sourceOfTruth.
问题出现：任何对数据的改变，不会留下变更过的记录。这对调试是一个噩梦！！
因此可以使用store模式：
var store = { ?debug: true, ?state: { ???message: ‘Hello‘ ?}, ?setMessageAction(newVaule) { ???if (this.debug) console.log(‘setMessageAction triggered with‘, newValue) ???this.state.message = newValue ?}, ?clearMessageAction() { ???if (this.debug) console.log(‘clearMessageAction triggered‘) ???this.state.message = ‘‘ ?}}store中的state的改变，都放置在store自身的action去管理！这就是集中方式的状态管理！
当然，每个实例／组件，可以有自己的私有状态：
var vma = new Vue({ ?data: { ???privateState: {}, ???sharedState: store.state ?}})var vmb = new Vue({ ?data: { ???privateState: {}, ???sharedState: store.state ?}})组件不能直接修改属于store实例的state ,而应该执行action来分发事件通知store去改变。
这样就可以记录所有store中发生的state的改变，同时实现记录变更mutation, 保存状态快照，历史回滚／时光旅行的调试工具：具体见vuex.
Vuex
Vuex是一个全局对象，还有2个额外的功能：
- Vuex的state储存是响应式的。
- 不可以直接改变store中的state。需要使用(commit)mutation.
简单计数：
const store = new Vuex.Store({ ?state: { ???count: 0 ?}, ?mutations: { ???increment (state) { ?????state.count++ ???} ?}})store.commit(‘increment‘)store.commit(‘increment‘)store.state.count ?//输出2核心概念：
- State： 保存组件的共享的状态。
- Getter：用于state的延伸，就是computed计算属性的功能。
- Mutation： 唯一可以改变store的状态的方法：(commit)mutation
- Action: 只能提交Mutation，可以包括async操作。
- Module: 解决单一状态树，导致对象过于庞大的问题。将store分割为多个module模块。相当于是嵌套子模块。
State
单一状态树，一个对象包含全部应用层级状态。 每个应用只有一个store实例。
Vuex通过store选项，把状态从根组件‘注入’到子组件中。
子组件可以通过this.$store来访问状态。
const store = new Vuex.Store({ ?state: { ???count: 0 ?}, ?mutations: { ???increment (state) { ?????state.count++ ???} ?}})const ?Counter = { ?template: `<div>count: {{ count }}</div>`, ?computed: { ???count() { ?????return this.$store.state.count ???} ?}}var vm = new Vue({ ?el: "#app", ?store, ?components: { Counter },})??mapState辅助函数和对象展开运算符（未能使用，不了解）。
Getter
针对state的派生的状态的操作：
(store的计算属性)，getter返回值根据它的依赖被缓存起来，只当它的依赖值改变了才会被重新计算。
Getter接受state为第一个参数
const store = new Vuex.Store({ ?state: { ???todos: [ ?????{ id: 1, text: ‘...‘, done: true }, ?????{ id: 2, text: ‘...‘, done: false } ???] ?}, ?getters: { ???doneTodos: state => { ?????return state.todos.filter(todo => todo.done) ???} ?}})通过属性访问：
store.getters对象中的函数可以访问：
store.getters.doneTodos // -> [{ id: 1, text: ‘...‘, done: true }]Getter可以接受其他getter作为第二个参数：我的理解，就是store.getters对象被当作第二个参数
const store = new Vuex.Store({ ?//略。。 ?getters: { ???doneTodos: state => { ?????return state.todos.filter(todo => todo.done) ???}, ???doneTodosCount: (state, getters) => { ?????return getters.doneTodos.length ???} ?????}})我们可以在任何组件中使用getters中的函数：
const ?Counter = { ?template: `<div>count: {{ count }}</div>`, ?computed: { ???count() { ?????return this.$store.getters.doneTodosCount ???} ?}}var vm = new Vue({ ?el: "#app", ?store, ?components: { Counter },})通过方法访问：
?getters: { ???//..略 ???getTodoById: (state) => (id) => { ?????return state.todos.find(todo => todo.id === id) ???} ?},store.getters.getTodoById(2) ??//->返回todo对象一个。{ id: 2, text: ‘...‘, done: false }Mutation
Vue.js简单的状态管理：
原文地址：https://www.cnblogs.com/chentianwei/p/9782499.html