在Vue中,可以使用store來管理全局狀態(tài),并且可以在不同組件之間進行數(shù)據(jù)傳遞。store是Vue提供的一個狀態(tài)管理模式,可以將需要在多個組件中共享的數(shù)據(jù),放到一個集中式的存儲空間中進行管理。這個集中式的存儲空間被稱為store。
在Vue中使用store傳值可以分為兩個步驟:1、定義store;2、在組件中使用store。
定義store
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } }) export default store
上面的代碼中,首先引入了Vuex并將其安裝到Vue中。然后定義了一個count為0的state對象和一個名為increment的mutation。其中,mutation中的increment函數(shù)會將state.count加1。
在組件中使用store
{{ count }}
在組件中使用store需要用到computed和methods。computed中可以通過this.$store.state.xxx直接獲取store中的state值。而methods中則可以通過this.$store.commit('xxx')調(diào)用store中的mutation函數(shù),來修改state中的值。
除了以上例子中的state和mutation,store中還有g(shù)etter和action等。getter可以對state的值進行處理后再進行調(diào)用。action則可以進行異步操作,再通過commit調(diào)用mutation。在實際項目中,根據(jù)實際需求而定。
在Vue中,使用store傳值能夠非常方便地實現(xiàn)組件之間的通信,同時也能夠幫助我們更好地管理全局狀態(tài)。