vue的状态管理系统——vuex

vuex是什么？

vuex官方解释是专为 Vue.js 应用程序开发的状态管理模式。通俗来说vuex好比是给一个大家族修建了一个仓库，保存这每个人的货物状态。

vuex的开始

vuex的核心store（仓库）
store就是一个仓库 ，所有的组件数据状态都在store里保存。
1.Vuex 的状态存储是响应式的。
2.改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。

vuex的核心概念

• State
• Getter
• Mutation
• Action
• Module

vuex的脚手架安装

npm install vuex --save
vue-cli配置：
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

创建vuex仓库（store）

你可以新建一个js文件也可以直接写在脚手架的main.js文件的里面
如果是新建的js文件一定不要忘记引入到main.js文件里

import storeConfig from './vuex/store'

一定不要忘记在vue实列上面挂载store

new Vue({
      el: '#app',
      router,
      store,//使用store
      template: '<App/>',
      components: { App }
    })

创建vuex仓库（store）

const store = new Vuex Store({
      state: {
            count:0
},
mutations: {
    increment (state){
        state.count++
     }
  }
})

获取状态state

通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更。
store 实例中读取状态最简单的方法就是在计算属性中返回某个状态：

// 创建一个 Counter 组件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {    //computed计算机属性
    count () {
      return store.state.count
    }
  }
}

Getter

可以理解为是一个公用的计算机属性,
Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。
我没用过 ，所以我不会这个。点击查看官方文档

Mutation（同步）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)
mutation好比一个事件容器，里面写的全是可以提交的方法事件

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

这个mutations不能直接调用想要改变数据必须得通过commit提交一个mutation才可以，这是改变数据的唯一途径

fun(){
store.commit('increment')
}

Action（异步）

Action 类似于 mutation，不同的是Action 可以包含任意异步操作。

最常用的是购物车调用异步 API 和分发多重 mutation：

actions: {
  checkout ({ commit, state }, products) {
    // 把当前购物车的物品备份起来
    const savedCartItems = [...state.cart.added]
    // 发出结账请求，然后乐观地清空购物车
    commit(types.CHECKOUT_REQUEST)
    // 购物 API 接受一个成功回调和一个失败回调
    shop.buyProducts(
      products,
      // 成功操作
      () => commit(types.CHECKOUT_SUCCESS),
      // 失败操作
      () => commit(types.CHECKOUT_FAILURE, savedCartItems)
    )
  }
}

Model

模块化
当应用变得非常复杂时，store 对象就有可能变得相当臃肿，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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 的状态