state

• 我們先來看一個簡單的state實例使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
count: 0
  }
})

• 那么我們應(yīng)該如何在vue組件中展示狀態(tài)呢？由于Vuex的狀態(tài)存儲是響應(yīng)式的，從store實例中讀取狀態(tài)最簡單的方法就是在計算屬性中返回某個狀態(tài)，如下：

//創(chuàng)建一個Counter組件
const Counter = {
    data() { return {} },
    template: `<div>{{ count }}</div>`,
    computed: {
        count () {
          return store.state.count
      }    
    }
  }

• 每當(dāng) store.state.count 變化的時候，都會重新求取計算屬性，并刷新界面。

需要注意的是如果你把 store.state.count 放在data中， store.state.count 的變化是不會主動觸發(fā)直接訪問帶store對象的，所以這樣寫五一是會報錯的。

這種模式依賴于全局的管理員 store ，如果模塊多了，意味著每個模塊或者頁面只要用到了這個state里面的數(shù)據(jù)，都得把store一如進來，這樣的操作確實有點難受。當(dāng)然，官方肯定是不允許有這樣難受的操作出現(xiàn)的：

Vuex 通過store選項，提供了一種機制將狀態(tài)從根組件“注入”到每一個子組件中（需調(diào)用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的實現(xiàn)：

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

• Vuex 的狀態(tài)固然好用，但是也不要濫用：

使用 Vuex 并不意味著你需要將所有的狀態(tài)放入 Vuex。雖然將所有的狀態(tài)放到 Vuex 會使?fàn)顟B(tài)變化更顯式和易調(diào)試，但也會使代碼變得冗長和不直觀。如果有些狀態(tài)嚴格屬于單個組件，最好還是作為組件的局部狀態(tài)。你應(yīng)該根據(jù)你的應(yīng)用開發(fā)需要進行權(quán)衡和確定。