Vue フロントエンド開発補助機能状態管理詳細例

  //....
  計算: {
        カウント: 関数(){
            this.$store.state.count を返します
        }
    }
 //....    

import { mapState } from 'vuex' //mapStateオブジェクトを導入する export default {
  // ...
  計算: mapState({
    // 矢印関数はコードをより簡潔にすることができます count: state => state.count,
  })
}
または import { mapState } from 'vuex' //mapStateオブジェクトを導入 export default {
  // ...
  計算: mapState({
    'count'、//状態名 countAlias と一致する: 'count' //countAlias は参照コンポーネントで使用されるエイリアスです})
}

'vuex' から { mapGetters } をインポートします。
エクスポートデフォルト{
  // ...
  計算: {
  // オブジェクトスプレッド演算子を使用して、計算されたオブジェクトにゲッターを混ぜます...mapGetters([
      'countDouble',
      'CountDoubleAndDouble',
      //..
    ])
  }
}

'vuex' から { mapMutations } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...mapMutations([
      'increment' // this.increment() を this.$store.commit('increment') にマップします
    ]）、
    ...mapMutations({
      add: 'increment' // this.add() を this.$store.commit('increment') にマップします
    })
  }
}

'vuex' から { mapActions } をインポートします。
エクスポートデフォルト{
  //..
  メソッド: {
    ...マップアクション([
      'incrementN' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
    ]）、
    ...マップアクション({
      add: 'incrementN' // this.add() を this.$store.dispatch('incrementN') にマップします
    })
  }
}

<テンプレート>
  <div align="center" style="background-color: ビスク;">
    <p>以下は、computed を使用してストア内のステータスデータを直接取得し、ステータスデータが変更されたときに同期的に更新する方法です。</p>
    <h1>状態を受け取るには computed を使用します: {{ computedState }}</h1>
    <h1>getter を受け取るには computed を使用します: {{ computedGetters }}</h1>
  </div>
</テンプレート>
<スクリプト>
  import { mapState,mapGetters } from 'vuex' //mapState、mapGetters オブジェクトを導入 export default {
    名前: 'ComputeShow',
    計算:{
    ...mapState({
      computedState:'count' //エイリアス: computedState
    }）、
    ...mapGetters({
      computedGetters:'getChangeValue' //エイリアス: computedGetters
    })
    }
  }
</スクリプト>
<スタイル>
</スタイル>

<テンプレート>
  <div align="center">
    <input type="number" v-model="paramValue" />
    <button @click="addNum({res: parseInt(paramValue)})">+増加</button>
    <button @click="subNum">- 減少</button>
  </div>
</テンプレート>
<スクリプト>
  輸入 {
    マップミューテーション、
    マップアクション
  } from 'vuex' //mapMutations、mapActionsオブジェクトを導入 export default {
    名前: 'CountChange',
    データ（） {
      戻る {
        パラメータ値: 1,
      }
    },
    メソッド: {
      ...mapMutations({
        subNum: 'sub' //別名subNumを追加
      }）、
      ...マップアクション({
        addNum: 'increment' // this.incrementN() を this.$store.dispatch('incrementN') にマップします
      })
    }
  }
</スクリプト>
<スタイル>
</スタイル>