Vuex是专门为Vue.js应用程序设计的状态管理工具。相当于数据库mongoDB，MySQL等，任何组件都可以存取仓库中的数据。其中vuex类似的 还是有Redux,Redux大多用于React,针对Redux后续在做补充
(1)Vuex的状态存储是响应式的 (2)当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态 (3)不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化
好处：
1、能够在vuex中集中管理共享的数据，易于开发和后期维护； 2、能够高效地实现组件之间的数据共享，提高开发效率； 3、存储在vuex的数据都是响应式的，能够实时保持数据与页面的同步； 使用场景：(1)登录信息、(2)购物车、(3)复杂的组件通信
1、安装vuex
npm install vuex --save/-dev2、引用vuex，创建仓库store。 创建 store.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //数据 const state={ count:10 } //action 执行异步操作，不可以修改state数据 const actions={ getParamSync (context,Object) { //处理异步操作 setTimeout(()=>{ //3.通过commit提交一个名为getParam的mutation //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation context.commit('increment',Object) },3000) } } //mutation 可直接修改state数据 const mutations={ increment(state,value){ state.count += value; }, decrement(state,value){ state.count -=value; } } //getter const getters = { newCount:state => state.count * 3 } export default new Vuex.Store({ state, mutations, actions, getters })3 . 在 main.js中注册到根组件中
import store from './store/store.js' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })state - - - state是存储的单一状态，是存储的基本数据。
getters - - - getters是store的计算属性，相当于组件中的computed的属性，getters返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算，在组件中使用$store.getters.fun()
mutations - - - 修改状态，并且是同步的。在组件中使用$store.commit(’’,params)
actions - - - 异步操作 在组件中使用 $store.dispatch("")
module - - - Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions
异步更改action，action中通过commit触发mutations进行数据更改 如图所示：
vuex高级篇1 、语法糖辅助函数
语法糖，四大金刚辅助函数 mapState,mapActions,mapMutations,mapGetters当一个组件需要多个状态是，这些状态都声明成计算属性过于冗长。于是有了辅助函数。