25.Vuex結合ComponentAPIの使用

15058 ワード

VuexはComponentAPIと組み合わせて使用
ComponentAPIにはthis.$store、useStoreで代用できます

import {
      useStore } from 'vuex'

export default {
     
  setup () {
     
    const store = useStore()
  }
}

ComponentAPIでstateとgetters

import {
        computed } from 'vue'
import {
        useStore } from 'vuex'

export default {
       
  setup () {
       
    const store = useStore()

    return {
       
      // access a state in computed function
      count: computed(() => store.state.count),
      // access a getter in computed function
      incCount: computed(() => store.getters.incCount)
    }
  }
}

にアクセス

ComponentAPIにおけるMutationsおよびActions

import {
        useStore } from 'vuex'

export default {
       
  setup () {
       
    const store = useStore()

    return {
       
      // access a mutation
      incCount: () => store.commit('incCount'),

      // access an action
      incSetBanner: () => store.dispatch('incSetBanner')
    }
  }
}

へのアクセスの完全な例:News.vueコンポーネントでは、ComponentAPIと組み合わせてstoreを使用し、state、getters、mutations、actions

<template>
    <div>
        <h1>Composition API  Vuexh1>
          userStore    state  count:{
      {count}}
        <br>
          userStore    state  num:{
      {num}}
        <br>
          userStore    getters revMsg:{
      {revMsg}}
        <br>
        <button @click="incCount">  userStore   mutations incCount  button>
        <br>
        banner:{
      {banner}}
        <br>
        <button @click="doCount">  userStore   actions doCount  button>
        <br>
        <button @click="incSetBanner">  userStore   actions incSetBanner  button>

    div>
template>

<script lang="ts">
    import {
        defineComponent,computed} from "vue";
    import {
        useStore} from 'vuex'
    export default defineComponent({
        
        setup() {
        
            const store=useStore();
            return {
        
                //   userStore   state=>count
                count:computed(() => store.state.user.count),
                banner:computed(() => store.state.user.banner),
                //   userStore   getters=>num
                num:computed(() => store.getters.num),
                //   userStore   getters=>revMsg
                revMsg:computed(() => store.getters.revMsg),
                //   userStore   mutations=>incCount
                incCount: () => store.commit("incCount"),

                //   userStore   actions=>doCount
                doCount:()=>store.dispatch("doCount"),
                //   userStore   actions=>incSetBanner
                incSetBanner:()=>store.dispatch("incSetBanner","      ")
            }
        }
    });
script>

にアクセスします.

C++言語ベースルーチン文字ストリーム

Webpackにおけるalias構成