Vuex 通俗版教程告訴你Vuex怎么用

寫在文前:

最近一直在用vue開發項目,寫來寫去就是那么些方法,對于簡單的項目一些常用的vue方法足以解決,但是涉及到頁面狀態,權限判斷等一些復雜的傳值,vuex是必須的。對于vuex也運用一段時間,但是總覺得少了點什么,或者停留在會用的狀態,理解不了精髓,當然了估計水平還沒達到。所以一直想找個時間總結一下vuex。一來深入的了解,二來也方便以后查閱。

import Vue from 'vue'; 
import Vuex from 'vuex'; 
Vue.use(Vuex); 

const store = new Vuex.Store({ 
       state: { count: 0 },
       mutations: {
            increment (state) { 
                state.count++ 
            } 
      }
 })

以上就是一個最簡單的Vuex,每一個Vuex應用就是一個store,在store中包含組件中的共享狀態state和改變狀態的方法(暫且稱作方法)mutations。

vuex的核心是:state,getter,actions,mutations

1、state

state就是根據你項目的需求,自己定義的一個數據結構,里面可以放些通用的狀態。

const state = {
  openId:"",
  storeId:"",
  storeName:''
}

例如上面所寫的,這些狀態可以在各個頁面通過vuex訪問。如下:

this.$store.state.openId = "111"

之前我一直通過上面的方式來修改state里面的狀態值,行,肯定能用,但是好像官方并不建議我們這樣使用,而是建議使用mutations來改變state里面的值,因為不通過mutations改變state,狀態不會被同步。至于mutations下面會講到。

2、getter

getter怎么理解呢?通俗的理解可以認為是getter里的函數就是vuex里的計算屬性,類似于computed函數。

const store = new Vuex.Store({ 
       state: {
            count: 0 
       },
       getters: {  // getters
            countAdd: function (state) {
                 return state.count++
            }
       },
       mutations: {
            increment (state) { 
                state.count++ 
            } 
      }
 })

getter函數怎么用呢?如上vuex里定義了一個getter函數countAdd。我們可以在vue文件里的computed計算屬性里引用,如下。

computed: {
     ...mapGetters{["countAdd"]} 
     show:function(){
           alert("這個是測試頁面")
     }
}

這樣我們可以直接在vue頁面里取到countAdd的值{{countAdd}}即為1。可惜在我的項目里目前還沒用到getter,可能寫的少了,還沒理解其中的要義。

3、mutations

官方定義:更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutations 非常類似于事件:每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方,并且它會接受 state 作為第一個參數:

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態
      state.count++
    }
  }
})

你不能直接調用一個 mutation handler。這個選項更像是事件注冊:“當觸發一個類型為 increment 的 mutation 時,調用此函數。”要喚醒一個 mutation handler,你需要以相應的 type 調用 store.commit 方法:

store.commit('increment')

也可以向store.commit傳入第二參數,也就是mutation的payload:

mutaion: {
    increment (state, n) {
        state.count += n;
    }
}
store.commit('increment', 10);

但是有時候,單個傳入n可能并不能滿足我們的業務需要,這時候我們可以選擇傳入一個payload對象:

mutation: { 
     increment (state, payload) { 
            state.totalPrice += payload.price + payload.count; 
     } 
} 
store.commit({
     type: 'increment', 
     price: 10, 
     count: 8
 })

不例外,mutations也有映射函數mapMutations,幫助我們簡化代碼,使用mapMutations輔助函數將組件中的methods映射為store.commit調用。

import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations({
        add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
    })
  }
}
這樣我們可以在vue文件里直接調用函數:this.add()而不用this.$store.commit('increment')這樣寫了,簡化了很多。
需要注意:Mutations必須是同步函數。
如果我們需要異步操作,Mutations就不能滿足我們需求了,這時候我們就需要Actions了。

4、action

Action 類似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接變更狀態。
Action 可以包含任意異步操作。
官方demo如下:

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

如果我在vue頁面里想用action,我們可以分發 Action,Action 通過 store.dispatch 方法觸發:

store.dispatch('increment')

Actions 支持同樣的載荷方式和對象方式進行分發:

// 以載荷形式分發
store.dispatch('incrementAsync', {
  amount: 10
})

// 以對象形式分發
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

我們也可以運用其映射函數:mapActions

methods:{
     ...mapActions{[
           "add":"increment "http://函數命名不相同
       //  "increment ":"increment "http://函數命名相同
     ]}
}
調用:this.add()即可。相同時候調用:this.increment()

Modules

由于使用單一狀態樹,應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時,store 對象就有可能變得相當臃腫。

為了解決以上問題,Vuex 允許我們將 store 分割成模塊(module)。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割:

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

總結起來:mutation 只管存,你給我(dispatch)我就存;action只管中間處理,處理完我就給你,你怎么存我不管(所有的改變state狀態的都是mutation 來操作);Getter 我只管取,我不改的(類似計算屬性)。

關于vuex目前也就了解這么多,在實際項目中vuex用什么,怎么用,還需要靈活改變,以后慢慢摸索吧。上面的示例很多都是vuex文檔上的,總結起來還是需要多看文檔,在實際項目中運用,才是最好的辦法吧。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容