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又有了哪些變化，和哪些可取之處。本文所寫，有不對的地方，你們多多提出來。共同進步。