详解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等知识。

作者：陈楠酒肆
链接：https://www.jianshu.com/p/9ebcc182922b