什么是Vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理插件。它采用集中式存储管理应用的所有组件的状态，而更改状态的唯一方法就是在mutaions里修改state，actions不能直接修改state

vuex的组成结构示意图:

Vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。输入和输出，其中action作为数据的输入，state作为数据的输出。如下图：

store:

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

创建store:

const store = new Vuex.Store({...});

store是Vuex.Store这个构造函数new出来的实例。在构造函数中可以传一个对象参数。这个参数中可以包含5个对象：

state => 基本数据getters =>state的计算属性mutations => 提交更改数据的方法，同步！actions => 把方法提交到mutation，异步操作modules => 将store模块化—当store很大的时候，分成模块，方便管理

关于store，需要先记住两点：

\1. store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；\2. 不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

一个完整的store的结构：

const store = new Vuex.Store({ state: { // 存放状态 }, getters: { // state的计算属性 }, mutations: { // 更改state中状态的逻辑，同步操作 }, actions: { // 提交mutation，异步操作 }, // 如果将store分成一个个的模块的话，则需要用到modules。 //然后在每一个module中写state, getters, mutations, actions等。 modules: { a: moduleA, b: moduleB, // ... } });

语法糖辅助函数：

mapState-----mapActions----mapMutations----- mapGetters

当一个组件获取多种状态的时候，为了方便可以用语法糖辅助函数

mapState和mapGetter的使用只能在computed计算属性中， mapMutations和mapActions使用的时候只能在methods中调用否则报错

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex' computed:{ ...mapState({ a:"a", // "a" 指的是state中的a b:"b" }), ...mapGetters({ Val:'newVal' // 可以重新命名 }) } methods:{ ...mapActions({ getSync:'getSyncNum' }) ...mapMutations({ increament:"increament" }) } template {{a}} {{b}} {{getSync(1)}} <button @click='increament(1)'></button>

什么时候用vuex:

当项目遇到以下两种场景时

多个组件依赖于同一状态时。来自不同组件的行为需要变更同一状态。