vuex狀態(tài)管理模式的示例分析

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

一、前言

本次接受一個(gè)BI系統(tǒng)，要求是能夠接入數(shù)據(jù)源-得到數(shù)據(jù)集-對(duì)數(shù)據(jù)集進(jìn)行處理-展現(xiàn)為數(shù)據(jù)的可視化，這一個(gè)系統(tǒng)為了接入公司自身的產(chǎn)品，后端技術(shù)采用spring boot，前端采用vue+vuex+axios的項(xiàng)目架構(gòu)方式，vuex作為vue的狀態(tài)管理，是尤為重要的部分。

二、vuex簡(jiǎn)單使用

安裝vuex

cnpm install vuex --save

在src目錄下建立文件夾，命名為store，建立index.js

如圖所示：

在index.js中引入vue和vuex狀態(tài)管理，并導(dǎo)出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中引入剛剛創(chuàng)建好的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里的全局?jǐn)?shù)據(jù)，可以把vue看做一個(gè)類，在其下面有許多屬性，其中有我們剛剛注入的vuex，如圖

我們可以看到vue他本身就是一個(gè)json，在其下有$store這個(gè)對(duì)象，而$store下又有state，state下得就是我們存儲(chǔ)在vue中的全局?jǐn)?shù)據(jù)，在組件中通過this.$store.state.token即可獲得我們的數(shù)據(jù)。

三、vuex的核心概念之getters

有時(shí)候我們需要在獲得的數(shù)據(jù)做一些簡(jiǎn)單的過濾或者處理的時(shí)候，getters就起到作用了。

代碼如下

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

同直接獲取token的方式一樣。getters也已經(jīng)掛載到了$store下，故，我們可以通過this.$store.state.getters.getToken的方式，調(diào)用其函數(shù)。 但vuex為我們提供了mapGetters能夠?qū)⑵溆成涞綄?duì)應(yīng)的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)
 
 },
}

映射出來(lái)的getters仍然掛載在vue上，如圖所示

四、vuex的核心概念之mutations與actions

我們可以吧mutations理解成一個(gè)事件函數(shù)，而actions就是觸發(fā)器，通過actions，發(fā)起動(dòng)作。

簡(jiǎn)單實(shí)例代碼如下。

 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分為不同的模塊，每個(gè)單獨(dú)的模塊具備getters，state，mutations，actions這四個(gè)store核心，

需要注意的是如果在模塊內(nèi)部加入了namesapced：true這一個(gè)屬性。在取值的時(shí)候需要做一點(diǎn)細(xì)微的變動(dòng)，通過mapGetters火mapActions映射時(shí)需要將模塊名作為路勁，來(lái)獲得該模塊的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的值得時(shí)候，我們來(lái)看一下geta這個(gè)getters屬性，在vue中的狀態(tài)，如圖所示

geta為模塊a下得getters屬性，在獲取的時(shí)候就需要這樣

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

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

而如果模塊沒有命令空間的話，vuex會(huì)自動(dòng)將模塊內(nèi)的getters，actions注入為全局的，直接按照原來(lái)個(gè)獲取方式就可以了。

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