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

為湖口等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及湖口網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站設(shè)計、成都網(wǎng)站制作、湖口網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

一、前言

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

二、vuex簡單使用

安裝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看做一個類，在其下面有許多屬性，其中有我們剛剛注入的vuex，如圖

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

三、vuex的核心概念之getters

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

代碼如下

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

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

映射出來的getters仍然掛載在vue上，如圖所示

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

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

簡單實例代碼如下。

 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核心，

需要注意的是如果在模塊內(nèi)部加入了namesapced：true這一個屬性。在取值的時候需要做一點細(xì)微的變動，通過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中的狀態(tài)，如圖所示

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

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

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

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

以上是“vuex狀態(tài)管理模式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：vuex狀態(tài)管理模式的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://aaarwkj.com/article38/pghpp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、服務(wù)器托管、網(wǎng)站改版、小程序開發(fā)、網(wǎng)站導(dǎo)航、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)