vuex状态管理

1、前言

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

2、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便可得到咱们的数据。

3、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上，如图所示

4、vuex的核心概念之mutations与actions

• 咱们能够吧mutations理解成一个事件函数，而actions就是触发器，经过actions，发起动做。
  简单实例代码以下。

mutations:{
         setToken(state,n){
            state.token=state.token+n;
         }
       },
       actions:{
         setToken({commit},n){
           commit('setToken',n)
         }
       }

• 在组件中的使用，同getters的用法，
  代码以下

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

    console.log(this)
    console.log(this.setToken(1))
    console.log(this.getToken)
  
  },methods:{
        ...mapActions(["setToken"])
  },

在vue的json中，一样能够找到相同的属性。

5、vuex核心概念之mudules

• vuex容许咱们将store分为不一样的模块，每一个单独的模块具有getters，state，mutations，actions这四个store核心，

须要注意的是若是在模块内部加入了namesapced：true这一个属性。在取值的时候须要作一点细微的变更，经过mapGetters火mapActions映射时须要将模块名做为路劲，来得到该模块的getters，和actions，模块化代码以下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const moduleA = {
  namespaced:true,
  state: { a:1 },
  mutations: {  },
  actions: {  },
  getters: { geta(state){
    return state.a;
  } }
}

const moduleB = {
  namespaced:true,
  state: { b:1},
  mutations: {  },
  actions: {}
}

const store = new Vuex.Store({ 
 
    state: {
      token: 0
    },
    getters:{
       getToken(state){
          return state.token;
       },
     
    } , mutations:{
      setToken(state,n){
         state.token=state.token+n;
      }
    },
    actions:{
      setToken({commit},n){
        commit('setToken',n)
      }
    },
    modules: {
      a: moduleA,
      b: moduleB
    },
  })
  export default store;

• 在组件中得到模块A的值得时候，咱们来看一下geta这个getters属性，在vue中的状态，如图所示

• geta为模块a下得getters属性，在获取的时候就须要这样

computed:{
    // ...mapGetters(["getToken"])
    ...mapGetters("a",["geta"])
  },
  
  mounted() {

    console.log(this)
    console.log(this.geta)

• 而若是模块没有命令空间的话，vuex会自动将模块内的getters，actions注入为全局的，直接按照原来个获取方式就能够了。

6、总结

这是我对vuex的基本用法和基本理解方式，vuex固然不可能局限于此，此处只列举了最简单的，作个总结的同时也等同于记下，听说vue3块出了，是用ts重写的vue，到时再去看看，vue3又有了哪些变化，和哪些可取之处。本文所写，有不对的地方，你们多多提出来。共同进步。