Vue.js是一款非常流行的JavaScript框架,不僅僅因為其靈活性和可擴展性,而且還因為其使用簡單。Vue.js的許多基本概念都非常易于掌握,其中就包括$store對象。$store是Vuex中的一個核心概念,是一個用于Centrally Manages State(管理狀態中心化)的對象。
在Vue.js中創建一個store對象的方式非常簡單。你可以在Vue.js應用程序的入口文件中創建它。最簡單的方法是使用Vuex.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++
}
}
})
在上面的代碼中,我們首先使用import關鍵字導入Vue.js和Vuex模塊。然后,我們使用Vue.use()方法為Vue.js添加Vuex插件。這樣,我們就可以使用Vuex.Store()構造函數創建一個新的store實例。
另一個很有用的$store對象特性是可以watch state來在對象狀態更改時自動觸發操作。以下示例演示了如何使用watch監聽$store對象中的所有狀態更改:
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)
}
)
}
})
上述代碼創建了一個新的Vue.js實例,并使用$store.watch()方法觀察$store對象中的所有狀態。當狀態發生變化時,我們輸出一條消息到console中。
總之,$store對象是Vuex的核心概念之一。它的作用是中心化管理Vue.js應用程序中的所有狀態。在應用程序中,您可以直接訪問$store屬性來獲取或更改存儲在$store中的狀態。此外,$store.watch()方法還可以用于監聽$store對象中的所有狀態變化。這些特性使得$store對象非常有用且易于使用。