每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
最简单的Store
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })
现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit(‘increment‘) console.log(store.state.count) // -> 1
注意: 通过提交mutation的方式,而非直接改变store.state.count.
注册store, 调用Vue.use(Vuex)
const app = new Vue({ el: ‘#app‘, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
之后我们就可以通过this.$store访问.
const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } }
Getter
(此时不理解mapGetters,和mapState)
Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
不能直接调用一个mutation handler.这个选项更像是事件注册: "当触发一个类型为increment的mutation时", 调用此函数." 要唤醒一个mutationhandler,你需要已相应的type调用storecommit方法;
store.commit(‘increment‘)
也可以向store.commit传入额外的参数,即mutation的载荷(payload)
大多数情况下,载荷应该是一个对象,这样可以包含多个字段并且记录的mutation会更容易读
// ... mutations: { increment (state, payload) { state.count += payload.amount } }
store.commit(‘increment‘, { amount: 10 })
提交mutation的的另一种方式是直接使用包含type属性的对象;
store.commit({ type: ‘increment‘, amount: 10 })
整个对象都作为载荷传给 mutation 函数. 因此 handler 保持不变：
mutations: { increment (state, payload) { state.count += payload.amount } }
原文：https://www.cnblogs.com/chenrun/p/9859009.html