yarn add vuex
1、vuex流程图
vuex可以帮助我们管理组件间公共的数据
创建一个 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
2、详解(state)
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：
// 创建一个 Counter 组件const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return store.state.count } } }
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
这种模式导致组件依赖全局状态单例
所以，
Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：
const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
