vuex狀態管理模式的示例分析

小編給大家分享一下vuex狀態管理模式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一、前言

本次接受一個BI系統，要求是能夠接入數據源-得到數據集-對數據集進行處理-展現為數據的可視化，這一個系統為了接入公司自身的產品，后端技術采用spring boot，前端采用vue+vuex+axios的項目架構方式，vuex作為vue的狀態管理，是尤為重要的部分。

二、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上，如圖所示

四、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中，同樣可以找到相同的屬性。

五、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注入為全局的，直接按照原來個獲取方式就可以了。

以上是“vuex狀態管理模式的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！