vuex的核心概念和运行机制

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

使用 Vuex 统一管理状态的好处
1.能够在 vuex 中集中管理共享的数据，易于开发和后期维护
2.能够高效地实现组件之间的数据共享，提高开发效率
3.存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

核心概念

state

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

Mutation

用于变更state中的数据,并且只有Mutation可以修改数据

Action

Action 用于处理异步任务。
如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

Getter

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。

modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
为了解决以上问题，可以将 store 分割成模块。
module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

**持久化vuex-persistedstate **

1. 安装插件
   npm install vuex-persistedstate --save
2. vuex中引入vuex-persistedstate

import createPersistedState from 'vuex-persistedstate'

4. store中写入：

plugins: [createPersistedState({
      storage: window.sessionStorage
})]

运行机制

vuex是独立的提供响应式数据的。其运行机制是单向数据流。

• vuex提供数据（state）来驱动视图(vue components)
• 通过dispath派发actions,在其中可以做一些异步的操作
• 通过commit来提交mutations,最后mutations来更改state。
• mutations需要一个同步的操作。如果没有异步的操作，可以直接从组件提交到mutations