详解vuex状态管理模式

一、前言

本次接受一个BI系统，要求是能够接入数据源-得到数据集-对数据集进行处理-展现为数据的可视化，这一个系统为了接入公司自身的产品，后端技术采用spring boot，前端采用vue+vuex+axios的项目架构方式，vuex作为vue的状态管理，是尤为重要的部分。这里，我将vuex如何运作和使用做一次总结，有错的地方，望多多提点。

二、vuex简单使用

安装vuex

cnpm install vuex --save

在src目录下建立文件夹，命名为store，建立index.js

如图所示：

在index.js中引入vue和vuex状态管理，并导出vuex，代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
   token: 0
  },
 })
 export default store;

在main.js中引入刚刚创建好的store并作为vue的store

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
Vue.config.productionTip = false
new Vue({
 render: h => h(App)
 ,
 store
}).$mount('#app')

获得store里的token

在vue的组件中，想要获得vuex里的全局数据，可以把vue看做一个类，在其下面有许多属性，其中有我们刚刚注入的vuex，如图

我们可以看到vue他本身就是一个json，在其下有$store这个对象，而$store下又有state，state下得就是我们存储在vue中的全局数据，在组件中通过this.$store.state.token即可获得我们的数据。

三、vuex的核心概念之getters

有时候我们需要在获得的数据做一些简单的过滤或者处理的时候，getters就起到作用了。

代码如下

getters:{
    getToken(state){
     return state.token;
    }

同直接获取token的方式一样。getters也已经挂载到了$store下，故，我们可以通过this.$store.state.getters.getToken的方式，调用其函数。 但vuex为我们提供了mapGetters能够将其映射到对应的getters的方法上去，用法如下所示

import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 components: {
  HelloWorld
 },
 computed:{
  ...mapGetters(["getToken"])
 },
 mounted() {
   console.log(this.getToken)
  console.log(this.$store.getters.getToken)
 },
}

映射出来的getters仍然挂载在vue上，如图所示