vuex

const store = new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項(xiàng),這可以把 store 的實(shí)例注入所有的子組件
  store,
  components: { Counter },
})

核心概念

  • state

作用
存儲(chǔ)數(shù)據(jù)

state定義
var state = {}

不使用vuex
存儲(chǔ)需要使用的變量,當(dāng)多個(gè)組件使用時(shí),需要在不同組件中重復(fù)引用。

使用vuex
在vuex對象中寫入state對象,并在vue根實(shí)例中引入vuex對象,所有子組件都可以訪問。

使用方法
this.$store.state.xx

  • Getters

作用
定義多組件使用的計(jì)算屬性

getters定義
傳入state作為第一個(gè)參數(shù),可以選其他getters作為第二個(gè)參數(shù)

var getters = {
  // ...
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }

不使用vuex
當(dāng)多個(gè)組件使用同一個(gè)計(jì)算屬性時(shí),需要在多個(gè)組件中定義相同的計(jì)算屬性。
如:

computed: {
  doneTodosCount () {
    return this.$store.state.todos.filter(todo => todo.done).length
  }
}

使用vuex
在vuex對象中寫入getters對象,所有子組件中可以使用。

使用方法

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}
  • Mutation

mutation定義
每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler),接受state作為第一個(gè)參數(shù),可傳入額外的參數(shù)。是同步事件不可在事件回調(diào)函數(shù)中寫入異步操作。

var mutations = {
    increment (state, n) {
      // 變更狀態(tài)
      state.count += n
    }
  }

作用
唯一修改store狀態(tài)的途徑是提交mutation中定義的事件,
相當(dāng)于把state中的數(shù)據(jù)當(dāng)成是可訪問不可修改的私有變量,而mutation是不可直接調(diào)用的公有方法,被當(dāng)成是事件的形式,需要發(fā)射事件觸發(fā)相應(yīng)的回調(diào)函數(shù)。

使用方法
this.$store.commit('increment', n)

  • Actions

actions定義
Action 函數(shù)接受一個(gè)與 store 實(shí)例具有相同方法和屬性的 context 對象,因此你可以調(diào)用 context.commit 提交一個(gè) mutation,或者通過 context.statecontext.getters 來獲取 state 和 getters。

  var actions = {
    increment (context) {
      context.commit('increment')
    }
  }

作用
actions類似于mutations,不同的是actions提交的是mutation,而不是直接改變狀態(tài),并且可以在actions內(nèi)部寫入異步操作。

使用方法
this.$store.dispatch('increment')

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

推薦閱讀更多精彩內(nèi)容

  • 安裝 npm npm install vuex --save 在一個(gè)模塊化的打包系統(tǒng)中,您必須顯式地通過Vue.u...
    蕭玄辭閱讀 2,964評(píng)論 0 7
  • Vuex是什么? Vuex 是一個(gè)專為 Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件...
    蕭玄辭閱讀 3,153評(píng)論 0 6
  • vuex 場景重現(xiàn):一個(gè)用戶在注冊頁面注冊了手機(jī)號(hào)碼,跳轉(zhuǎn)到登錄頁面也想拿到這個(gè)手機(jī)號(hào)碼,你可以通過vue的組件化...
    sunny519111閱讀 8,040評(píng)論 4 111
  • Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)...
    白水螺絲閱讀 4,691評(píng)論 7 61
  • Vuex 是什么? ** 官方解釋:Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式**。它采用集中...
    Rz______閱讀 2,322評(píng)論 1 10