在Vue中,有一個非常重要的概念就是“store”,可以理解為全局狀態管理器,本質上是一個響應式的對象,存儲著應用程序中的所有狀態。在開發Vue應用的過程中,絕大多數的組件都需要使用到store中存儲的狀態,因此取store是非常必要的。
要取store,首先需要引入Vuex的核心庫,在Vue中使用Vuex是非常方便的,只需要在Vue項目中安裝Vuex依賴包,在main.js文件中引入并注冊即可。在main.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++
}
}
})
new Vue({
store,
render: h =>h(App)
}).$mount('#app')
在上述代碼中,我們首先引入Vuex庫,并在Vue中注冊了Vuex,接著創建了一個store實例,包含了state和mutations兩個對象,其中state對象存放了應用程序中的所有狀態,mutations對象中則定義了改變狀態的方法,并將store實例傳遞給了根Vue實例,這樣我們就可以在整個應用程序中使用store中存儲的狀態了。
接下來,我們就可以通過this.$store來取store中存儲的值了。在Vue組件中,我們可以直接通過computed函數來定義計算屬性,從而取得store中存儲的值,如下所示:
<template>
<div>
<span>The count is {{ count }}.</span>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.count
}
},
methods: {
increment () {
this.$store.commit('increment')
}
}
}
</script>
在上述代碼中,我們定義了一個計算屬性count,通過this.$store.state.count來取得store中存儲的狀態值,同時還定義了一個increment方法,通過this.$store.commit('increment')來改變store中count的值。這樣,在點擊按鈕時,我們就可以實現store中的計數功能了。
除了在Vue組件中取store的值之外,我們還可以在JS中直接取得store的狀態,如下所示:
import store from './store'
console.log(store.state.count) // =>0
store.commit('increment')
console.log(store.state.count) // =>1
在上述代碼中,我們首先引入了store模塊,然后通過store.state.count來讀取store中存儲的值,再通過store.commit('increment')來改變store中count的值,最后再次通過store.state.count來驗證store中的值是否已經改變。
總之,在Vue中取store非常簡單,在不同場景下我們可以使用不同的方式來取得store中的狀態,如Vuex中的計算屬性computed,Vuex中的方法commit,或者直接在JS中引入store模塊并訪問store.state。我們可以根據自己的實際需要靈活使用Vue提供的各種方式來高效地訪問store。