Vue.js是一款非常流行的JavaScript框架,不僅僅因?yàn)槠潇`活性和可擴(kuò)展性,而且還因?yàn)槠涫褂煤?jiǎn)單。Vue.js的許多基本概念都非常易于掌握,其中就包括$store對(duì)象。$store是Vuex中的一個(gè)核心概念,是一個(gè)用于Centrally Manages State(管理狀態(tài)中心化)的對(duì)象。
在Vue.js中創(chuàng)建一個(gè)store對(duì)象的方式非常簡(jiǎn)單。你可以在Vue.js應(yīng)用程序的入口文件中創(chuàng)建它。最簡(jiǎn)單的方法是使用Vuex.Store的構(gòu)造函數(shù):
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 對(duì)象狀態(tài)
count: 0
},
mutations: {
// 改變對(duì)象狀態(tài)
increment (state) {
state.count++
}
}
})
在上面的代碼中,我們首先使用import關(guān)鍵字導(dǎo)入Vue.js和Vuex模塊。然后,我們使用Vue.use()方法為Vue.js添加Vuex插件。這樣,我們就可以使用Vuex.Store()構(gòu)造函數(shù)創(chuàng)建一個(gè)新的store實(shí)例。
另一個(gè)很有用的$store對(duì)象特性是可以watch state來(lái)在對(duì)象狀態(tài)更改時(shí)自動(dòng)觸發(fā)操作。以下示例演示了如何使用watch監(jiān)聽$store對(duì)象中的所有狀態(tài)更改:
new Vue({
el: '#app',
store,
created () {
this.$store.watch(
(state, getters) =>state.count + getters.count,
(newValue, oldValue) =>{
console.log('new value: ', newValue, ' old value: ', oldValue)
}
)
}
})
上述代碼創(chuàng)建了一個(gè)新的Vue.js實(shí)例,并使用$store.watch()方法觀察$store對(duì)象中的所有狀態(tài)。當(dāng)狀態(tài)發(fā)生變化時(shí),我們輸出一條消息到console中。
總之,$store對(duì)象是Vuex的核心概念之一。它的作用是中心化管理Vue.js應(yīng)用程序中的所有狀態(tài)。在應(yīng)用程序中,您可以直接訪問(wèn)$store屬性來(lái)獲取或更改存儲(chǔ)在$store中的狀態(tài)。此外,$store.watch()方法還可以用于監(jiān)聽$store對(duì)象中的所有狀態(tài)變化。這些特性使得$store對(duì)象非常有用且易于使用。