麻瓜前端开发谈谈vuex

参考文档[https://vuex.vuejs.org/zh-cn/state.html]

在vue开发中我们经常会使用数据传递，当维护的数据状态不多的时候，我们经常会使用props来传递数据。但是如果数据越来越复杂的的时候，按平时编程的习惯会定义多几个全局变量，但是在js里面如果采用这种方式来，开发者需要对自己维护的全局变量进行同步和异步的管理，这也是解决一个函数在读数据的时候避免其他操作来写数据。幸好js是单线程的，我们不必要解决进程和锁的复杂问题，只解决异步数据管理即可。这个时候vue给我们上述问题提供一种数据方式那就是vuex。vuex的核心是store,有几个要点：

创建一个store:

const store=new Vuex.Store({
state,
getters,
actions,
mutations
})

1. state:

说白了就是里面包含几个定义变量的对象，例如
const state = {
category: {list: [], count: 0},
apiList: [],
currentApi: null,
}

2. getters:
   gettters简单点就是对state里面数据的get方法，例如
   export const getCategoryList = state => state.category.list
   export const getCategoryCount = state => state.category.count
   export const getApiList = state => state.apiList
   export const getCurrentApi = state => state.currentApi

3. mutations：

既然有get的方法很容易就想到应该有set的方法吧，所以mutations里面就有对state数据的修改。例如
export const selectApi = (state, api) => {
state.currentApi = api
}
只不过值得注意的是mutations方法里面不予许包含任何异步操作，只能包含同步操作。说到底就是对我们平时取值的同步操作的函数封装。

4. action：

action是用来干嘛的呢？好像对数据的get和set操作都有了。但是我们来看一个例子，例如我们经常在ajax请求成功后，将取到的值赋给一个定义好的全局变量，而这个设置全局变量的操作只能在放在回调函数里面。不知道有没有发现上面所说的mutation里面只包含同步操作呢！所以呢vuex把action用来封装异步操作的，当然也可以封装同步操作。例如：
export const getApiListAjax = ({ commit }, options) => {
这里是异步请求.then((res) => {
commit('getApiList', {res: res, index: options.index})//这个是调用mutation里面的set方法
})
}
export const getApiList = ({ commit }, options) => {
//这里是同步操作了
commit('getApiList', {res: res, index: options.index})//这个是调用mutation里面的set方法
}

总结：

一下子抛出那么多概念，让我们理一下有什么联系，怎么调用的吧！首先在vue组件里面引进store后，如果要使用set操作，则通过store.dispatch('getApiListAjax')来调用，这个是一个能够操作state里面数据的对外提供的接口，这个时候我想在action里面调用mutation方法来操作state数据，那就要调用commit()函数了，如commit('getApiList', {res: res, index: options.index})//这个是调用mutation里面的set方法。此时数据的set操作已经完成了。那我们来谈谈get操作吧，很简单就是把get引进来就可以用了，如果getters里有很多个get，引进来岂不是好蛋疼，没错vue2提供了mapGetters 辅助函数，它仅仅是将 store 中的 getters 映射到局部计算属性，具体用法参考vue文档！
至此，我是一名麻瓜前端者！