vuejs如何實現(xiàn)全局狀態(tài)管理

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

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

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

vuex全局狀態(tài)管理

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

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

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: {
      //存放初始數(shù)據(jù)
    count: 0
  },
  mutations: {
      //存放修改數(shù)據(jù)的方法
    increment (state) {
      state.count++
    }
  }
})

使用數(shù)據(jù)

方法一：使用$store調(diào)用

在組件中直接使用this.$store.state調(diào)用數(shù)據(jù)

this.$store.state.數(shù)據(jù)名

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

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

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

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

Mutations的作用與使用方法

mutations里面就是寫對數(shù)據(jù)進行操作的方法的

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

使用方式一：

觸發(fā)mutations函數(shù)，使用commit調(diào)用里面的方法名

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

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

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

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

調(diào)用是在組件的方法里

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

使用方法二

在組件中導入vuex里的mapMutations函數(shù)

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

...是展開操作符

import {mapMutations} from 'vuex'

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

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

Actions的用法

Action用于處理異步任務。

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

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

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

使用actions要在組件中使用dispatch進行觸發(fā)

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

actions傳遞參數(shù)

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

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

在組件中寫實參

btnHandle(){
    //dispatch專門觸發(fā)action,并傳入?yún)?shù)
    this.$store.dispatch('addAsync',5)
}

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

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

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

注意：在組件中調(diào)用actions方法，在actions中使用commit調(diào)用mutations方法

getters

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

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

• Store中數(shù)據(jù)發(fā)生變化，Getter的數(shù)據(jù)也會跟著變化.

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

第一種調(diào)用方式：this.$store.getters.方法名

this.$store.getters.showNum

第二種調(diào)用方式：映射展開，在computed中映射

import {mapGetters} from 'vuex'

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

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