在Vue中，使用組件是非常常見的。Vue的組件系統為我們提供了非常方便的方式去封裝和復用UI組件。 在組件之間進行數據共享是必不可少的，而Vuex是Vue提供的狀態管理庫。但很多開發者并不會覺得在小應用或者小組件中引入Vuex是必要的，此時可以使用Vue Component Store來解決這一問題。

Vue Component Store是什么？簡單來說，就是一個輕量級的狀態管理器，在Vue組件中進行使用，不需要使用Vuex。 通過Vue官方提供的provide/inject特性，能夠將 Component Store 實例注入到每個子組件中。

那么如何使用Vue Component Store呢？

// componentStore.js
const componentStore = {
state: {
count: 0
},
increment() {
this.state.count++
},
decrement() {
this.state.count--
}
}
export default componentStore

首先，創建一個componentStore.js文件，并定義一個 Component Store 對象。在這個對象中，我們可以定義所需要的屬性和方法。此處我們定義了一個count計數器。在increment和decrement方法中操作這個計數器。

// main.js
import Vue from 'vue'
import App from './App.vue'
import componentStore from './componentStore'
Vue.config.productionTip = false
Vue.mixin({
beforeCreate() {
this.$store = componentStore
}
})
new Vue({
render: h =>h(App),
}).$mount('#app')

然后，在main.js中定義 Vue.mixin 全局混入，將 Component Store 實例注入到Vue中，方便在任意組件中進行使用。

// Button.vue
<template>
<div>
<button @click="$store.increment()">+</button>
{{ $store.state.count }}
<button @click="$store.decrement()">-</button>
</div>
</template>

最后，在需要使用 Component Store 的 Button.vue 組件中，使用 $store 訪問 state 和 methods。

Component Store 使用獨立于 Vuex，可以用于小應用或者小組件，方便易用。Vue官方也推薦在小規模應用中使用 Component Store。