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等,这样就可以条理清楚的进行状态的管理了