Vuex

Vuex是什么：

介绍：Vuex是专门为Vue.js设计的状态管理模式。它采用集中式储存管理Vue应用中所有组件的状态
理解：核心就是 store（仓库），仓库是用来干什么的？你就当它用来储存东西的。

Vuex可以理解为一种开发模式或框架，通过状态集中管理驱动组件的变化，应用级的状态集中放在store中，改变状态的方式是提交mutations,异步逻辑封装在action中

使用 Vuex 统一管理状态的好处 ：

能够在 vuex 中集中管理共享的数据，利于开发和后期的维护；

能够高效的实现组件之间的数据共享，提高开发效率；

存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步；

什么样的数据适合存储在 vuex 中 ：

一般情况下，只有组件之间共享的数据，才有必要存储在 vuex 中，对于组件中的私有数据，依旧存储在组件自身的 data中即可。

在 Vue 中使用 Vuex 的基本使用 ?

安装 Vuex 依赖项 :

npm install vuex --save

导入 Vuex 包 :

import Vuex from 'vuex'
Vue.use(Vuex)

创建 Store 对象 :
const store = new Vuex.store({
//state中存放的就是全局共享的数据

 state:{count:0},
    mutations:{},
    actions:{},
    getters:{}
})

将 Store 对象挂载到 Vue 实例中 :

new Vue({
	el:"#app",
	render:h => h(app),
	router,
	//将创建的共享数据对象，挂载到vue实例中
	//所有组件，就可以从store中获取全局的数据了
	store
	})

Vuex的核心属性：

state：定义初始化状态
getters：获取状态
mutations:设置状态
actions：异步提交mutations
modules：把状态管理模块化，各自的组件构成各自的模块

State
state即Vuex中的基本数据！

单一状态树
Vuex使用单一状态树，即用一个对象就包含了全部的状态数据。state作为构造器选项，定义了所有我们需要的基本状态参数。

在Vue组件中获得Vuex属性
我们可以通过Vue的Computed获得Vuex的state，如下：

const store = new Vuex.Store({
    state: {
        count:0
    }
})
const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        }
    },
    //..
})

getters
即从store的state中派生出的状态。

getters接收state作为其第一个参数，接受其他 getters 作为第二个参数，如不需要，第二个参数可以省略如下例子：

const store = new Vuex.Store({
    state: {
        count:0
    }，
    getters: {
        // 单个参数
        countDouble: function(state){
            return state.count * 2
        },
        // 两个参数
        countDoubleAndDouble: function(state, getters) {
            return getters.countDouble * 2
        }
    }
})

与state一样，我们也可以通过Vue的Computed获得Vuex的getters。

const app = new Vue({
    //..
    store,
    computed: {
        count: function(){
            return this.$store.state.count
        },
        countDouble: function(){
            return this.$store.getters.countDouble
        },
        countDoubleAndDouble: function(){
            return this.$store.getters.countDoubleAndDouble
        }
    },
    //..
})

每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。

Mutation : 更改 Store 中的数据
Mutation: (同步)用于更改 Store 中的数据。只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据，通过这种方式虽然操作起来比较繁琐一些，但是可以集中监控所有数据的变化。

//定义Mutation
const store = new Vuex.Store({
state:{
    count = 0;
},
mutations:{
add(state){
//变更状态
    state.count++;
  }
 }
})

actions

Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
我们用如下例子来结束actions：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      setInterval(function(){
        context.commit('increment')
      }, 1000)
    }
  }
})

注意：Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

分发actions
Action 通过 store.dispatch 方法触发：
store.dispatch(‘increment’)
其他与mutations类似的地方
Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementN', {
  n: 10
})

// 以对象形式分发
store.dispatch({
  type: 'incrementN',
  n: 10
})

Modules

使用单一状态树，导致应用的所有状态集中到一个很大的对象。但是，当应用变得很大时，store 对象会变得臃肿不堪。

为了解决以上问题，Vuex 允许我们将 store 分割到模块（module）。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于使用Vuex的理解是什么：

由于Vue是单向数据流，子组件内部不能直接修改从父级传递过来的数据，子组件与子组件之间无法相互传递数据。如果我们想让两个子组件之间进行通信的话，可以借助子组件 A 向父组件传值，父组件接收子组件 A 的数据后再传给 B 组件这样的方式进行通信。

   但是这样会有一个问题，就是如果子组件 A 的父组件上面还有一层爷爷组件，或者还有更多祖父类型的层级，那么是不是会很麻烦。

   因此，我们会想到能不能我们将一个共有的数据存在一个特定的地方，用的时候自己去拿，这样就不需要一层层传值，于是乎 Vuex 就应运而生了。

vuex的使用场景

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车vuex是一种集中式状态管理模式，它按照一定的规则管理状态，保证状态的变化是可预测的。