vuejs如何實現全局狀態管理

這篇文章給大家分享的是有關vuejs如何實現全局狀態管理的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

在vuejs中可以利用vuex實現全局狀態管理；Vuex是一個專為Vue.js應用程序開發的狀態管理模式，可以用來管理全局數據，可以管理復雜應用的數據狀態，比如兄弟組件的通信、多層嵌套的組件的傳值等等。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

vuex全局狀態管理

Vuex 是一個專為Vue.js 應用程序開發的狀態管理模式?？梢怨芾韽碗s應用的數據狀態，比如兄弟組件的通信、多層嵌套的組件的傳值等等。

通俗的來說vuex就是全局數據管理，用來管理全局數據的，vue原本的數據管理只能父子組件之間傳遞數據，并且不方便，使用vuex可以進行全局數據管理，將所有數據存儲到vuex中，使用時調用。

vuex的核心：

• state

• mutations

• actions

• getter

Vuex的用法

安裝并使用vuex

安裝

1.在項目中進行安裝

npm install vuex --save

2.新建一個store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
      //存放初始數據
    count: 0
  },
  mutations: {
      //存放修改數據的方法
    increment (state) {
      state.count++
    }
  }
})

使用數據

方法一：使用$store調用

在組件中直接使用this.$store.state調用數據

this.$store.state.數據名

方法二：導入mapState,在組件中將數據展開映射,需要寫到計算屬性中，使用的時候直接寫 count就行

//先導入mapState
import {mapState} from 'vuex'

computed:[
    ...mapState(['count'])
]

在對數據進行操作時，不能直接調用state的數據，如果要修改數據，需要在mutation里寫方法，目的就是方便查找哪里除了問題

Mutations的作用與使用方法

mutations里面就是寫對數據進行操作的方法的

  mutations: {
//存放修改數據的方法
   add(state) {
     state.count++
   }
 }

使用方式一：

觸發mutations函數，使用commit調用里面的方法名

this.$store.commit這是觸發mutation的第一種方式

methods:{
   handle(){
       this.$store.commit('add')
   }
}

mutations傳參mutation的方法里可以傳遞兩個參數，第一個就是state,第二個是自定義的參數payload

  mutations: {
//存放修改數據的方法
   addN(state，N) {
     state.count+=N
   }
 }

調用是在組件的方法里

methods:{
   handle2(){
       //觸發mutation并傳參
       this.$store.commit('addN',4)
   }
}

使用方法二

在組件中導入vuex里的mapMutations函數

mapMutations(['sub'])是對里面的方法與store里的方法進行映射

...是展開操作符

import {mapMutations} from 'vuex'

methods:{
   //將方法名寫在[]里  ['addN','sub']
   ...mapMutations(['sub'])
   btnhandle(){
       //調用時直接寫this.方法名
       this.sub()
       //當傳入參數時，直接寫這個參數，不需要寫state
       this.addN(4)
   }
}

注意:在Mutation函數里不能寫異步代碼；比如寫定時函數，雖然頁面會改變，但是實際狀態數值不會變。于是就有了actions

Actions的用法

Action用于處理異步任務。

如果通過異步操作變更數據，必須通過Action，而不能使用Mutation，但是在Action中還是要通過觸發Mutation的方式間接變更數據.

在store里與mutations同級寫一個actions:{ } 在它里面調用mutations的方法，然后在組件中觸 發Actions

  mutations: {
  //存放修改數據的方法
    add(state) {
      state.count++
    }
  },
  actions:{
      //context是上下文
      addAsync(context){
          setTimeout(()=>{
              //調用add方法，actions中不能直接修改state中的數據，只有mutation有這個權力
              context.commit('add')
          })
      }
  }

使用actions要在組件中使用dispatch進行觸發

btnHandle(){
    //dispatch專門觸發action
    this.$store.dispatch('addAsync')
}

actions傳遞參數

在store的actions里和mutations都要寫形參

  mutations: {
  //傳參
    addN(state,n) {
      state.count+=n
    }
  },
  actions:{
      //context是上下文
      addAsync(context,n){
          setTimeout(()=>{
              //調用add方法，并傳參
              context.commit('addN',n)
          })
      }
  }

在組件中寫實參

btnHandle(){
    //dispatch專門觸發action,并傳入參數
    this.$store.dispatch('addAsync',5)
}

第二種是展開并映射引入mapActions

//引入方法
import {mapActions} from 'vuex

methods:{
    //映射actions
    ...mapActions(['addAsync'])
    btnhandle(){
        //調用對應的actions
        this.addAsync()
    }
}
//也可以不寫btnhandle方法了直接將映射的方法名寫在點擊操作上

注意：在組件中調用actions方法，在actions中使用commit調用mutations方法

getters

• Getter用于對Store中的數據進行加工處理形成新的數據。不會修改原數據

• Getter可以對Store中已有的數據加工處理之后形成新的數據，類似Vue的計算屬性。

• Store中數據發生變化，Getter的數據也會跟著變化.

state:{
   count:0
},
getters:{
   showNum(state){
       return '當前最新的數據是:'+state.count
   }
}

第一種調用方式：this.$store.getters.方法名

this.$store.getters.showNum

第二種調用方式：映射展開，在computed中映射

import {mapGetters} from 'vuex'

computed:{
   ...mapGetters(['showNum'])
}

感謝各位的閱讀！關于“vuejs如何實現全局狀態管理”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！