25.Vuex 结合 Composition API的使用

Vuex结合CompositionAPI使用

Composition API中没有this.$store,可以使用useStore来替代

import {
      useStore } from 'vuex'

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

1. Composition API中访问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)
       }
     }
   }
   

2. Composition API中访问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组件中结合Composition API使用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>