Vuex

Vuex是做什么的

官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。

• 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
• Vuex也集成到Vue的官方调试工具devtools extension，提供了诸如零配置的time-travel调试、状态快照导入导出等高级调试功能。 

状态管理：即将多个组件需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层的Vue实例中，让其他组件可以使用 。为实现这种状态管理，并使共享变量变成响应式的，官方推出了一个在多个组件间共享状态的插件：Vuex。

需要共享的状态（eg）：用户的登录状态、用户名称、头像、商品的收藏、购物车的物品等等

• 成员列表：

1. state 存放状态（变量）
2. mutations state成员操作（同步方法）
3. getters 加工state成员给外界（计算属性）
4. actions 异步操作（异步方法）
5. modules 模块化状态管理（对象）

import Vue from 'vue'
import Vuex from 'vuex'

// 1、安装插件
Vue.use(Vuex)

// 2、创建对象
const store = new Vuex.Store({
  // 变量
  state: {
    number: 10,
    name: '小明'
  },
  // 方法(同步)
  mutations: {
    numSub(state) {
      state.number--
    },
    numAdd(state) {
      state.number++
    },
    updateInfo(state) {
      state.name = '小红'
    }
  },
  // 方法(异步，例如网络请求)
  actions: {
    aUpdateInfo(context) {
      setTimeout(() => {
        context.commit('updateInfo')
      },1000)
    }
  },
  // 计算属性
  getters: {
    doubleNum(state) {
      return state.number * 2
    }
  },
  // 对象
  modules: {
    a: {
      state: {},
      mutations: {},
      actions: {},
      getters: {}
    },
    b: {

    }
  }
})

// 3、导出store独享
export default store


// 4、取数据
$store.state.number
// 调用方法
$store.commit('numSub')
// 调用计算属性
$store.getters.doubleNum
$store.dispatch('aUpdateInfo')