详解VUEX是什么

vuex是什么东东，很多人即使看了文档也是一头雾水。只知道它是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 中 Store 的模板化定义如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
  },
  actions: {
  },
  mutations: {
  },
  getters: {
  },  
  modules: {
    
  }
})
export default store

由上面的代码可以看出，vuex包含5个属性，下面我们将逐一解释。

state：state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。代码样式：

state:{
projects:[],
userInfo:{}
}

state数据结构处理好以后，需要调用。那么该用什么来调用呢。想想后端从前端拿到了数据，总要做个处理吧，处理完了再存到数据库中，这就用到了action。它是定义提交触发更改信息的描述，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态

actions：Actions就是从服务器端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。

/*
备注：SET_PROJECT_LIST是mutations自定义的变量。store.commit只是提交一个 mutation，commit('参数1','参数2')。其中，参数1就不说了，参数2就是为参数1赋值。
*/
actions: {
    LOAD_PROJECT_LIST: function ({ commit }) {
      axios.get('API接口').then((response) => {
        commit('SET_PROJECT_LIST', { list: response.data })
      }, (err) => {
        console.log(err)
      })
    }
  }

mutations: 调用 mutations 是唯一允许更新应用状态的地方，代码如下：

/*备注：state是上面定义的数据结构，projects是state定义的变量，如上所示。
SET_PROJECT_LIST是mutations自定义变量。
state.projects = list。意思就是把{list}值赋给state.projects;
*/
export const SET_PROJECT_LIST = 'SET_PROJECT_LIST'; //定义变量

mutations: {
    SET_PROJECT_LIST: (state, { list }) => {
      state.projects = list
    }
  }

getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从 Store 中的 projectList 中筛选出已完成的项目列表：

getters: {
 completedProjects: state => {
  return state.projects.filter(project => project.completed).length
 }
}

modules允许将当个store拆分成多个store，每个模块拥有自己的 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 的状态

今天讲vuex是想跟大家说一下，后面我将结合vuex写个项目，里面将融入vue2+vuex+ES6/7等知识。demo我就不在此列出，大家可以到网上下载。
为了更好的服务大家，请加入我们的技术交流群：（511387930），同时您也可以扫描下方的二维码关注我们的公众号，每天我们都会分享经验，谢谢大家。