在 Vue 元件中獲得 Vuex 狀态

那麼我們如何在 Vue 元件中展示狀态呢？由于 Vuex 的狀态存儲是響應式的，從 store 執行個體中讀取狀态最簡單的方法就是在 計算屬性 中傳回某個狀态：

// 建立一個 Counter 元件
const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return store.state.count
    }
  }
}
           

每當 

store.state.count

 變化的時候, 都會重新求取計算屬性，并且觸發更新相關聯的 DOM。

然而，這種模式導緻元件依賴全局狀态單例。在子產品化的建構系統中，在每個需要使用 state 的元件中需要頻繁地導入，并且在測試元件時需要模拟狀态。

Vuex 通過 

store

 選項，提供了一種機制将狀态從根元件“注入”到每一個子元件中（需調用 

Vue.use(Vuex)

）：

const app = new Vue({
  el: '#app',
  // 把 store 對象提供給 “store” 選項，這可以把 store 的執行個體注入所有的子元件
  store,
  components: { Counter },
  template: `
    <div class="app">
      <counter></counter>
    </div>
  `
})
           

通過在根執行個體中注冊 

store

 選項，該 store 執行個體會注入到根元件下的所有子元件中，且子元件能通過 

this.$store

 通路到。讓我們更新下 

Counter

 的實作：

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}