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使用Vuex</h1>
           访问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>