vuejs怎麼實作全域狀態管理

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

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

#vuex全域狀態管理

Vuex是一個專為Vue.js 應用程式開發的狀態管理模式。可以管理複雜應用的資料狀態，例如兄弟元件的通訊、多層嵌套的元件的傳值等等。

通俗的來說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'])
}

總結

• state是存放初始數據，進行數據初始化的，最好不要在元件裡直接呼叫state
• mutations裡面是儲存對數據進行操作的方法，但是不能進行非同步操作
• actions裡面是進行非同步操作的方法
• getters用於對Store中的數據進行加工處理形成新的資料

相關推薦：《

vue.js教學》

以上是vuejs怎麼實作全域狀態管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！