vuex-state-mapState補助関数

vuex定義:
vuexはvueの状態管理であり、複数のコンポーネント間の共有状態をより容易に実現するために
インストール:

npm install vuex --save

次の操作を行います.

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

Vue.use(Vuex)  // vue   vuex， vuex      vue    

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})
// main.js    js
import store from './store'
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

state
オブジェクトにすべてのアプリケーションレベルの状態(格納されたデータと理解されています)が含まれており、($store.state)でデータを取得できます.
vuexで取得したデータをデータに直接割り当てると、変更ビューでは変更されません.たとえば、コンポーネントがロードされたときにthis.$store.state.contの値をcountに割り当て、変更が変更されたvuexの値はdataの値ではありません.

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      count: this.$store.state.count
    }
  }
}
</script>

計算プロパティ(computed)で

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // count: this.$store.state.count
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>

しかしcomputedを使用するとまた新しい問題が発生します.ここで10値または100値を使用するには100個の関数を書くので、mapState関数で解決します.
mapState補助関数
定義＃テイギ＃
1つのコンポーネントが複数のステータスを取得する必要がある場合、これらのステータスを計算プロパティとして宣言すると、重複と冗長性があります.この問題を解決するために、mapState補助関数を使用して計算プロパティを生成し、数回キーを押さないでください.mapState関数を使用するには、vuexから関数を導入します.
1つ目の書き方(推奨しない)
次のように問題があります.dataの優先度がcomputedより大きいので、ページは100にレンダリングされます.

<template>
  <div class="home">
    <div>{{count}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
import { mapState } from 'vuex' //    
export default {
  data () {
    return {
      count: 100
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

二番目の書き方
この中には3つの選択肢があります

<template>
  <div class="home">
    <div>{{count}}</div>
    <div>{{countAlias}}</div>
    <div>{{countPlusLocalState}}</div>
    <button @click="$store.state.count ++">click</button>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      // count: 100
    }
  },
  computed: {
    ...mapState({
      //            
      count: state => state.count,

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

      //        `this`       ，        
      countPlusLocalState (state) {
        return state.count + this
      }
    })
  }
}
</script>