vuex状态管理模式

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，这是官方的解释，但其实个人感觉它的功能类似与Bus，也就是数据总线的功能，它把一些公共的数据都抽出来，做成一个单独类，然后将这些数据称之为状态，其实大概就是这样了，vuex其实还是挺简单的，需要引用插件的话，需要先使用

npm install vuex --save

安装vuex，并且在main.js使用它，即

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

这样才可以使用，不过vuex依赖promise，因此需要引入es6-promise（这个我没引入过，也没问题，大概是我的浏览器支持promsie，因此不需要吧。）
Vuex主要有Sate、Mutation和Action三个核心概念，其中state状态，其实就是数据了，由于state的状态都是响应式的，因此读取状态的最好办法就是在computed（计算属性）中返回某个状态，而一个组件需要取多个状态的时候，可以使用mapState来帮助生成计算属性（少写点代码），而这需要引入mapState，引入代码如下所示：
import {mapState} from ‘vuex’
引入之后便可以开始取状态了，代码如下：

 ...mapState({
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  showSettings: state => state.settings.showSettings,
  needTagsView: state => state.settings.tagsView,
  fixedHeader: state => state.settings.fixedHeader
}),

这样书写起来简单，快捷了许多

Mutation是vuex中更改store中的状态的唯一方法，Vuex中的mutation非常类似于事件（或者说方法），大家在mutation里面注册方法，然后需要使用时使用commit调用该方法，和事件总线差不多，只是简化了注册过程，只要将方法写在mutation里面就算注册了，而只要commit就算调用了。以下是关于mutation的方法

export default {
getLastNews(state,[arg...]) {
    getNoticeList(1, 1, 8).then((res) => {
        state.LastNews = res.data.result
        // console.log(state.LaseNews)
    })
 },

}
这便是最简单的一个mutation了。而需要调用的话，只需要

store.commit('getLastNews',[args...])就可以了

Action的话，是类似于mutation的对于状态的异步处理，它提交的是mutation，Action可以包含任意异步操作。而我们想使用异步操作状态的时候，可以调用dispatch来分发Action。以下是关于Action的方法

export default {
    getLastNews(context) {
        context.commit('getLastNews')
    },
}

如果要调用的话，需要
store.dispatch(‘getLastNews’)
还剩下一个module，可以将状态分成不同的模块，而每个模块都有自己完整的mutation、action、state等，这样就可以条理清楚的进行状态的管理了