Vueコア技術-53,Vuex-コア概念-state

      Vuex      ,     Vuex         ,    vuex   
     Vuex    :State

Vuex-State     ,     ,             ,
State  "     "  ,         store  
State                 
                      

  Vuex          ，
 store                           

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: `
    
class="app">
      <counter>counter>
    div>
  `
}) 
  
       store  ， store            
  
サブコンポーネントはthis.$storeはstoreインスタンスにアクセスします.
const Counter = {
  template: `<div>{{ count }}div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
  
 、mapState    
  :1つのコンポーネントが  のステータスを  する  がある  
    computed: {
      A () {
        return this.$store.state.A
      },
      B () {
        return this.$store.state.C
      },
      B () {
        return this.$store.state.C
      }
      ...
      ...
    },
  
   が なり、 の  が じであることがわかり、コードの  と   をもたらします.
  :VuexはmapState    を  し、   に    を  する:
import { mapState } from 'vuex'

export default {
  // ...
  computed: mapState({
    count: state => state.count,

    //        'count'     `state => state.count`
    countAlias: 'count',

    //        `this`       ，        
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
}
  
     がstateサブノード と じである  、mapStateに     を  できます.
computed: mapState([
  //    this.count   store.state.count
  'count'
])
  
 、オブジェクト     
mapState  はオブジェクトを します.ローカル  プロパティと  して    するには、1つのツール  を  して  のオブジェクトを1つに  し、  オブジェクトをcomputedプロパティに す  があります.
オブジェクト     を  すると、 き を   できます.
computed: {
  localComputed () { /* ... */ },
  //                      
  ...mapState({
    // ...
  })
}
  
mapStateは     によってstore.state.xxxマッピングthis.xxxは、  のVueのthisオブジェクトに  マッピングされ、thisを してこれらのオブジェクトにアクセスできます.
 、stateの  
  Vuex              Vuex,
                  ,              ,

              ，             
  Vuex           ,         
  
 、 わり
   Vuex    State      ,,             ,state         
     Vuex    Getter